CSS Animations

How CSS animations work

CSS animations let the browser change selected style properties over time using keyframes, timing, duration, easing, delay, and iteration settings. The key distinction is that the motion is declarative: the browser calculates the intermediate states during rendering, which makes animations predictable and efficient when used for visual transitions rather than script-heavy effects.

Because the animation is tied to CSS rules rather than imperative code, designers can separate presentation from behaviour more cleanly. That also means the browser can optimise the animation pipeline, but only for properties that the rendering engine can interpolate smoothly. Animating layout-heavy properties can still trigger more expensive repaint or reflow work.

Keyframes, timing, and interpolation

The core building block is the @keyframes rule. It defines the start, end, and any intermediate states that the browser should move between. A style declaration then attaches those keyframes to an element and controls how the sequence runs, including whether it loops, pauses, reverses, or starts after a delay.

The browser does not simply jump from one state to the next. It interpolates values where the property type allows it, creating gradual change across the duration. That is what gives CSS animations their smoothness, but it also means the result depends on whether the property is animatable and how the browser computes those intermediate values.

Common use cases and design trade-offs

CSS animations are best suited to motion that supports user experience: subtle emphasis, state change, loading indicators, affordance cues, and progressive disclosure. They are usually a poor fit for complex interaction logic, because they do not replace application state management or event handling.

The main trade-off is control versus simplicity. CSS animations are easier to author for presentational motion, but they can become hard to coordinate when the animation must respond to runtime conditions, user input, or dynamic content. In those cases, JavaScript may still orchestrate the timing while CSS handles the visual interpolation.

Performance and accessibility considerations

CSS animations can be performant, but not all animated properties are equal. Animating transform and opacity is typically cheaper than animating properties that affect layout, because the browser can often composite those changes without recalculating the full page layout. Poorly chosen animation properties can still make a page feel slow or unstable.

Motion also has an accessibility dimension. Users who are sensitive to movement may need reduced motion preferences respected, and animation should never obscure content, delay essential actions, or create confusion about interface state. Good animation supports comprehension; it does not become the interface itself.

Related resources from NHI Mgmt Group

• How should security teams handle untrusted CSS in webmail clients?
• What do security teams get wrong about CSS sanitisation?
• How should security teams implement custom CSS for authentication pages without creating usability or security problems?
• How should security teams evaluate CSS as an attack vector in web and email environments?