ContextQMD
Back to Content

Animatable CSS properties

files/en-us/web/css/guides/animations/animatable_properties/index.md

latest3.2 KB
Original Source

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., {{CSSXref("color", "", "#formal_definition")}}).

[!NOTE] The interpolation method for each CSS data type is described in its "Interpolation" section (E.g., {{CSSXref("<length>", "", "#interpolation")}}).

Animation types

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 {{DOMXref("Element/animationstart_event", "animationstart")}} event).

  • Discrete

    • : The property's values are not additive, and interpolation swaps from the start value to the end value at 50%. Specifically, denoting by p the progress value:
      • If p < 0.5, then V_result = V_start;
      • If 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., {{CSSXref("visibility", "", "#interpolation")}}).

Animating custom properties

For custom properties registered using the {{DOMXref("CSS/registerProperty_static", "registerProperty()")}} method, the animation type is by computed value, with the computed value type determined by the property's syntax definition.

For unregistered custom properties, the animation type is discrete.

See also