Animations

Summary

`@keyframes` plus the `animation` property let you define multi-step CSS animations that run automatically, loop, or respond to state changes. Good animation communicates state and hierarchy without distracting the user, and developers should also respect reduced-motion preferences for accessibility.

• 1Build a simple loading spinner using `@keyframes` and `animation`. Keep the first version small, then add one improvement after the core behavior works.
• 2Practice `animation-timing-function` and `animation-iteration-count`. Test it with at least one normal case and one edge case so you can explain the behavior confidently.
• 3Learn to animate `transform`/`opacity` for smooth, GPU-accelerated motion.