MDNの@keyframesの解説に「キーフレーム内で!important
が付けられた宣言は無視される」とあるものの、どういう意味なのか分かりませんでした。
「詳細度(優先順位)を上書きする効果がなくなる」という意味なのかと思ったら、「そのスタイル指定がまったく働かなくなる」という意味でした。
@keyframes important {
50% {
width: 300px !important; /* スタイル指定が無視される */
background: lightgreen; /* こちらは問題なし */
}
}
See the Pen CSS: Declarations in a keyframe qualified with !important are ignored by Yuusaku Miyazaki (@sutara79) on CodePen.