React (Next.js）で開発していて、CSS ファイルで animation の指定を行ったが反映されずに悩んだ。
結論としては、併用していた PostCSS のプラグインの中に悪さしているものがありそう（詳しく検証はしていない）。animation のプロパティを書く順番によって、:local が埋め込まれることがあるようだ。
keyframe 名を一番最初に持ってくることで解決する。
@keyframes spinner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
// これは動かない
animation: 1s infinite alternate spinner;
// => animation: 1s infinite alternate :local(spinner)
// これは動く
animation: spinner 1s infinite alternate;
久々にくだらない罠にハマった。
↧