CSS Keyframes Animation デザインガイド
@keyframes animation timeline の status を percentage で表します。animation 再生時間、遅延、繰り返し、方向、fill mode、イージングカーブを調整できます。短い UI フィードバックは一般に 150〜400ms、ページ要素の登場アニメーションは 400〜800ms 程度が目安です。長すぎると操作が重く感じられます。
アニメーションを優先 transform 付き opacity、通常は再 layout を避けてより滑らかに動作します。motion sickness に敏感なユーザーは次を使用してください @media (prefers-reduced-motion: reduce) 不要な変位を無効にします。
使い方
- 用途に合ったアニメーションの種類を選択します。
- Duration、Delay、Direction、Fill Mode、Timing Function を調整します。
- 確認用 rhythm を再生し、生成された class と keyframes をコピーします。
よくある質問
animation と transition の違いは何ですか？
Animation は複数フレームを定義して自動ループできます。一方 transition は、要素の状態が変化するときに開始状態から終了状態へ滑らかに遷移させる用途に適しています。
無限ループを設定するには？
Iteration Count に Infinite を選ぶと、code は次のように出力されます。
infinite。Fill Mode の選び方は？
forwards は最後の frame を維持し、backwards は delay 中に最初の frame を適用し、both は両方を適用します。
一時停止ボタンはどう動作しますか？
このツールは animation-play-state で paused / running を切り替えるため、animation 自体を再構築しません。
アニメーションによる不快感を軽減するには？
大きな移動や回転を抑え、ちらつきを避け、prefers-reduced-motion 向けに静的な代替表示を提供します。