以下の条件が揃うと、Chrome において意図しないアニメーション挙動が発生することを確認しました。
-
animation-delayを使用している - keyframes 内で
var()を使用している - CSS 変数の値を非同期に変更している (例: React の
useEffectで DOM 要素を取得後に変数を設定する)
実例
以下の CodePen を Firefox と Chrome で開き、挙動を比較してみてください。
本来は Firefox のように、赤い正方形が静止している状態が期待される動作ですが、Chrome では正方形が動いてしまっています。
See the Pen animation-delay-var-bug by inonote (@inonote) on CodePen.
回避策
CSS だけでトリッキーなことをせずに Web Animations API を使いましょう。
おまけ
興味深いことに、Chrome の開発者ツールで要素を調査すると、描画上は (意図せず) 動いているのにもかかわらず本来あるべき場所にハイライトが表示されます。
