!importantが優先される
CSSアニメーションと!important
とでルールが衝突した場合、!important
が優先されます。
The origin of a declaration is based on where it comes from and its importance is whether or not it is declared !important (see below). The precedence of the various origins is, in descending order:
- Transition declarations [css-transitions-1]
- Important user agent declarations
- Important user declarations
- Important author declarations
- Animation declarations [css-animations-1]
- Normal author declarations
- Normal user declarations
- Normal user agent declarations
Declarations from origins earlier in this list win over declarations from later origins.
Origin and Importance | CSS Cascading and Inheritance Level 3
Chromeにはバグがある
優先順位について、Chromeにバグがあるようです。
https://jsfiddle.net/Lhankor_Mhy/xdgsp2ey/
<p>
test
</p><p>
test(!important規則があってもアニメーションする)
</p>
p{animation:test1.2seaseforwards2s;}@keyframestest{0%{color:#f00}100%{color:#000}}p{color:#00f;}p+p{color:#00f!important;}