Animatable CSS Properties Cheatsheet - Online Reference

Animatable CSS properties are properties whose values can be smoothly interpolated between two states by the browser's rendering engine. These properties can be used with CSS transitions (transition) and CSS animations (@keyframes). The interpolation type varies—numeric values are mathematically interpolated, colors are blended in a specific color space, and discrete properties jump between values at keyframe boundaries. Properties like opacity, transform, color, and width are classic examples.

Many CSS properties are not animatable, including display (traditionally—though transition-behavior: allow-discrete now enables it in modern browsers), content, cursor, direction, float, font-family (discrete jump), overflow, position, text-align, white-space, and most layout-defining properties. These properties either have no meaningful intermediate states or would cause reflow issues during interpolation. Always check this cheatsheet or MDN documentation before building animations.

Discrete animation means the property jumps between values at keyframe boundaries with no smooth interpolation. For example, visibility: visible → visibility: hidden flips at exactly the 50% mark in a keyframe animation—there's no "half-visible" state. Discrete properties work in @keyframes animations but not in traditional CSS transitions (unless you use transition-behavior: allow-discrete, a newer CSS feature). Examples include visibility, mix-blend-mode, paint-order, and scroll-behavior.

You can determine if a property is animatable by: (1) checking this cheatsheet, (2) consulting the MDN Web Docs—each CSS property page includes an "Animation type" section in the formal definition table, (3) looking at the official W3C CSS specifications, or (4) testing it in browser DevTools by applying a transition and observing whether the change is smooth or instant. The animation type is categorized as: discrete, by computed value, color, length, percentage, number, integer, transform list, shadow list, or repeatable list.

Traditionally, no—display is not animatable and cannot be used in transitions. However, modern CSS (Chrome 117+, Edge 117+, Safari 18+) now supports transition-behavior: allow-discrete, which enables discrete properties like display to participate in transitions alongside @starting-style. Even with this, the animation is a discrete jump at the transition's endpoint, not a smooth fade. For smooth show/hide effects, it's still recommended to animate opacity and visibility with a transition, and optionally set display after the transition ends.

The most frequently animated CSS properties in web design are: opacity (fade effects), transform (translate, scale, rotate for movement and scaling), color / background-color (color transitions), box-shadow (shadow depth effects), width / height (size changes), border-radius (shape morphing), filter (blur, brightness effects), and margin / padding (spacing adjustments). These properties are GPU-accelerated in many cases (especially opacity and transform), making them ideal for smooth 60fps animations.

By default, browsers interpolate colors in the sRGB color space using a straight-line (linear) interpolation between the RGB channel values. This can sometimes produce muddy midpoints (e.g., transitioning from red to blue through grayish-purple). Modern CSS allows you to specify the interpolation color space using color-interpolation-filters or by using color functions like oklch() and oklab() which interpolate perceptually. You can also use the @color-profile at-rule for advanced color management. Properties like color, background-color, border-color, box-shadow (color part), and caret-color all use color interpolation.

CSS Transitions (transition) animate a property from its current value to a new value when a state change occurs (e.g., :hover, class toggle). They're reactive—triggered by an event. CSS Animations (@keyframes + animation) allow you to define complex multi-step sequences that can loop, auto-play on page load, and control intermediate states at precise percentages. Animations support discrete properties (visibility jumps at keyframes), while transitions traditionally only support interpolable properties (unless transition-behavior: allow-discrete is used). Use transitions for simple state changes and animations for complex choreography.