CSSアニメーションと!importantとの優先順位のChromeバグについて（Chrome 83 で修正済）

!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:
　

1. Transition declarations [css-transitions-1]
2. Important user agent declarations
3. Important user declarations
4. Important author declarations
5. Animation declarations [css-animations-1]
6. Normal author declarations
7. Normal user declarations
8. 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 83 で修正された」と、コメント欄で教えていただきました。

優先順位について、Chromeにバグがあるようです。
https://jsfiddle.net/Lhankor_Mhy/xdgsp2ey/

<p>
test
</p>
<p>
test(!important規則があってもアニメーションする)
</p>

p{
  animation: test 1.2s ease forwards 2s;
}
@keyframes test {
  0% { color: #f00 }
  100% { color: #000 }
}
p{
  color: #00f ;
}
p+p{
  color: #00f !important;  
}