Sequencing & Timing · Who moves first
Keyframes关键帧
- controlled
- staged
- structured
An animation split into states at a few points in time (0%, 50%, 100%), with the browser filling in everything between them.
When to use it
Use it when an animation has more than two states or changes direction midway; with only a start and an end, “Easing” describes it well enough.
Parameters
@keyframes · 0% / 50% / 100% · per-step easing, no single easing for all · animation-fill-mode: both
Recipe
holds the last keyframe : bothKeyframes → @keyframes · 0% / 50% / 100% · per-step easing, no single easing for all · animation-fill-mode: both
One sentence for your AI
Write this animation with @keyframes using three stops at 0%, 50% and 100%, moving 4px higher at the 50% mark, total 600ms, with animation-fill-mode: both.