User guide
A CSS animation pairs a @keyframes rule (the steps) with the animation property (duration, timing, repetition). Prefer animating transform and opacity for performance.
- Use
animation-iteration-count: infinitefor a loop. - Respect
prefers-reduced-motionfor accessibility.
FAQ
How do I restart an animation in JS?
Remove then re-add the animation class after a reflow (e.g. by reading element.offsetWidth) to force a restart.
Which properties should I animate for performance?
transform and opacity are GPU-accelerated and don't trigger layout recalculation.