A keyframe marks an important moment, or “beat,” in an animation sequence. It can define changes such as position, rotation, or scale, while the animation system fills in the movement between keyframes to create a smooth result. section 7.3
Keyframes let you describe the important changes without manually specifying every frame. For example, describing a rotation lasting one second is simpler than defining the element’s position at every frame of that second. section 7.3
Use keyframe-based animation when you need:
- Several moments of change within one animation. section 7.4.2
- Continuous playback or looping without requiring user interaction or another trigger. section 7.4.2
- Fine control over timing, sequencing, and several CSS properties. section 7.4.2
Rotation without frame-by-frame instructions
Set an element’s important animation states and specify a one-second rotation. The animation interpolates the values between those states, producing smooth movement without manually describing every frame. section 7.3
When an animation behaves unexpectedly, use a browser Inspector to view its timeline, slow it down, pause it, replay it, or inspect its source. Animation tools can also adjust duration, delay, and keyframe offsets. section 7.3 section 7.4.2
Keyframe animations are more complex and versatile than transitions. Transitions usually move one or more properties between an initial and final state after an interaction, while keyframes support multiple stages and ongoing playback. section 7.4.2
