シーケンスとタイミング · どれが先に動く
キーフレーム关键帧
- 制御できる
- 段階的
- 構造的
アニメーションをいくつかの時点の状態（0%、50%、100%）に分け、その間はブラウザに補間させます。
使いどころ
状態が 3 つ以上あるときや途中で向きが変わる場合に使います。始点と終点だけなら「イージング」の指定で足ります。
パラメータ
@keyframes · 0% / 50% / 100% · per-step easing, no single easing for all · animation-fill-mode: both
レシピ
最後のキーフレームを保持 : bothキーフレーム → @keyframes · 0% / 50% / 100% · per-step easing, no single easing for all · animation-fill-mode: both
AI に渡す一文
このアニメーションを @keyframes で書いてください。0%・50%・100% の 3 つを置き、50% でさらに 4px 上へ、全体 600ms、animation-fill-mode: both を指定します。