CSS Animations and Transitions rely on the concept of animatable properties, and all CSS properties are animatable unless otherwise specified. Each property's animation type determines how values combine - interpolate, add, or accumulate - for this property. Transitions only involve interpolation, whereas animations may use all three combination methods.
Note: The animation type for each CSS property is listed in its "Formal definition" table (E.g.,
Note: The interpolation method for each CSS data type is described in its "Interpolation" section (E.g.,
There are mainly four animation types as defined in the Web Animations specification:
- Not animatable
The property is not animatable. It is not processed when listed in an animation keyframe and is unaffected by transitions.
Note: An animation effect targeting only properties that are not animatable will still exhibit the usual behavior for an animation effect (E.g., firing the
The property's values are not additive, and interpolation swaps from the start value to the end value at
50%. Specifically, denoting by
pthe progress value:
p < 0.5, then
V_result = V_start;
p ≥ 0.5, then
V_result = V_end.
- By computed value
Corresponding individual components of the computed values are combined using the indicated procedure for that value type. If the number of components or the types of corresponding components do not match, or if any component value uses discrete animation and the two corresponding values do not match, then the property values combine as discrete.
- Repeatable list
Same as by computed value except that if the two lists have differing numbers of items, they are first repeated to the least common multiple numbers of items. Each item is then combined by computed value. If a pair of values cannot be combined or any component value uses discrete animation, then the property values combine as discrete.
Some properties have specific interpolation behavior not covered by these four types. In this case, refer to the property's "Interpolation" section (E.g.,