Control animations from JavaScript
Each @keyframes attached to an element is a CSSAnimation object. getAnimations() lists them, and its playState follows animation-play-state. Two animations on one element run at the same time, each on its own clock.
@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
names: [ 'blink', 'wobble' ]
state: running
after adding .paused: paused