Animation & effects values

<easing-function>

How progress through a transition or animation maps to change over time: steady, speeding up, slowing down, overshooting, or jumping in steps. It can be a keyword, a cubic-bezier() curve, a steps() staircase, or a linear() function made of straight segments.

transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

<timeline-range-name>

A named stretch of a scroll-driven timeline, such as the part of a view timeline while an element is entering the scrollport. 0% is the start of the stretch and 100% its end, so an animation can be attached to just that part of the scroll.

.card {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

<single-transition>

One transition in the transition shorthand: the property to watch, a duration, an easing function, a delay, and whether discrete properties may transition. The parts can come in any order, but the first time is always the duration and the second the delay.

<single-transition-property> is all or a property name. <transition-behavior-value> is normal or allow-discrete; allow-discrete lets properties such as display and overlay flip at the right moment of a transition (Chrome 117 · Firefox 129 · Safari 17.4).

transition: opacity 200ms ease-out, transform 300ms ease-out 50ms;

<single-animation-direction>

Whether each cycle of a keyframe animation plays forwards, backwards, or alternates between the two.

<single-animation-fill-mode>

Whether an animation's keyframe styles apply before it starts (during its delay) and after it ends.

<single-animation-iteration-count>

How many times an animation's cycle repeats. Fractions are allowed, so 0.5 plays half a cycle and stops.

<single-animation-play-state>

Whether an animation is running or paused. A paused animation holds its current frame and resumes from there.

.spinner:hover { animation-play-state: paused; }

<single-animation-composition>

How an animation's value combines with the element's underlying value, or with other animations on the same property.

<transform-function>

One step of a transform: a move, scale, rotation, skew, perspective or matrix. A transform value is a list of these. Order matters, because each function works in the coordinate system left by the ones before it: translate(100px) rotate(45deg) and rotate(45deg) translate(100px) put the box in different places.

Each function is described under Transform functions. For a single move, scale or rotation, the separate translate, scale and rotate properties are simpler and can be animated independently.

<filter-function>

A graphical effect applied to an element's rendering, such as a blur or a colour shift. A filter value is a list of these, applied in order.

Each function is described under Filter functions. A filter list can also include url() references to SVG <filter> elements. Unlike box-shadow, drop-shadow() follows the shape of the element's visible pixels, so the transparent parts of an image cast no shadow.

.glass { backdrop-filter: blur(12px) saturate(1.4); }

<shadow>

One shadow: two offsets, an optional blur radius, an optional spread distance, an optional colour, and the inset keyword to draw the shadow inside the box instead of outside. A shadow property takes a comma-separated list; the first shadow is drawn on top.

box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 24px -4px rgb(0 0 0 / 0.15);