CSS animation creates movement and visual change in HTML elements over time. Unlike a simple transition between two states, an animation can use multiple keyframes, affect multiple properties, loop continuously, and control timing and sequencing without requiring user interaction. section 7.4.2
Plan an animation by choosing the effect, then refine its timing and behavior:
- Use an animation property or an animation generator to apply an effect to an HTML element. section 7.4.2
- Define important moments with keyframes, such as when movement begins, changes direction, or resizes. section 7.3
- Adjust duration, delay, timing, and keyframe offsets until the movement fits the page. section 7.3 section 7.4.2
- Preview the result, slow it down, pause it, replay it, and inspect its source when debugging. section 7.3
Refining an effect in the Inspector
A designer creates a keyframe-based effect with YellowPencil's Animation Generator and previews it in real time. If the motion feels too fast, the animation manager can adjust its duration or delay. The browser Inspector can then slow or pause the animation, show its timeline, and expose the source for debugging. section 7.4.2 section 7.3
