transition property CSS Reference

Definition and Usage

The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

• Initial the concatenation of the initial values of its longhand properties:
  • transition-delay: 0s
  • transition-duration: 0s
  • transition-property: all
  • transition-timing-function: ease
• Applies to all elements, ::before and ::after pseudo-element
• Inherited no
• Media interactive
• Computed Value as specified
• Animatable no
• Canonical order order of appearance in the formal grammar of the values

Syntax

Formal syntax: [ none | <single-transition-property> ] || <time> || <timing-function> || <time>

Note that order is important within the items in this property: the first value that can be parsed as a time is assigned to the transition-duration, and the second value that can be parsed as a time is assigned to transition-delay.

See When property value lists are of different lengths for details on how things are handled when lists of property values aren't the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.

Examples

No examples

Compatibility

Desktop browsers

Mobile browsers