Animation events, direction and fill mode
Two cycles of 0.2s: animationiteration fires once (between the cycles) and animationend at 0.4s. With alternate, the second cycle runs backwards, so the last frame played is the from frame: forwards keeps 50px. Without a fill mode the bar returns to its own 100px.
@keyframes describes the steps of an animation by percentage of its time, and the animation properties attach it to an element with a duration, easing, delay, number of repeats, direction and fill mode; unlike a transition, it runs by itself, can loop and can pass through many steps.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a heartbeat animation that scales a .heart to 1.25 at 15% and 45% of the time and back to 1 elsewhere, looping forever every 1.2s.
Make three .card elements fade and slide up into view one after another (0s, 0.15s, 0.3s delays), with no flash before they start, and staying visible at the end.
Log "done" when a .toast finishes a 0.3s slide-out animation, then remove the toast from the page.
Explain it without notes
What is the difference between a CSS transition and a keyframe animation?
Explain each value of animation-fill-mode with an example.
What does animation-direction: alternate do, and how does it affect easing and the end state?
How does the animation shorthand tell the duration from the delay, and what naming trap should you avoid?
How do you restart a CSS animation on demand?
Preview
Console
Nothing logged yet.Expected console output
animationstart grow 0
animationiteration grow 0.2
animationend grow 0.4
forwards, after the end: 50px
none, after the end: 100px