CSS animation

Where a transition waits for something to change, an animation just runs. You write the choreography once in a '@keyframes' block and attach it: 'animation: pulse 1.2s ease-in-out infinite'. That shorthand is packing eight properties (name, duration, timing function, delay, iteration count, direction, fill mode, play state), which is why it looks cryptic.

Use it for anything self-starting or repeating: spinners, skeleton shimmer, marquees, attention pulses, on-load entrances, drifting background shapes. Use it too when the motion has middle waypoints, since a transition only knows start and end.

Gotchas: reach for 'animation-fill-mode: forwards' only when the final keyframe genuinely has to persist, since without it the element snaps back to its pre-animation styles the instant it finishes. Even then the sturdier fix is to make the element's underlying styles match that last pose, so nothing depends on the animation staying attached. On an infinite animation the property does nothing at all, because the animation never finishes. Infinite animations also keep the compositor awake, so stick to transform and opacity and pause them off-screen. And re-triggering the same animation on the same element does nothing: you have to remove the class, force a reflow, and re-add it, or drop to the Web Animations API instead.