Animations use keyframes for multi-step motion or visual state sequences.
Animation API pieces
@keyframesdefinitionanimation-name,duration,timing-functioniteration-count,direction,fill-mode
Pitfall
Infinite decorative animation on many elements can distract users and waste battery/CPU.
Important interview questions and answers
- Q: How do you make animation accessible?
A: Gate or tone down motion usingprefers-reduced-motion. - Q: Why animate transform/opacity often?
A: Better runtime characteristics than layout-heavy properties. - Q: When use animation-fill-mode?
A: To preserve start/end state before or after animation runs.
Practice: Change one property in the playground and observe cascade + layout in DevTools.