Movement with a purpose
Loading spinners, a gentle pulse on a new badge, a confetti burst — @keyframes animations run on their own, no hover needed. And because motion makes some people dizzy, they must respect the reader's "reduce motion" setting.
@keyframes and animation
- @keyframes name { from {…} to {…} } or with percentages.
- animation: name duration easing iteration-count — e.g. spin 1s linear infinite.
- Animate transform and opacity for smooth results.
- @media (prefers-reduced-motion: reduce) — switch off or soften non-essential motion.