transition

Try it

Transitions enable you 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.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

css

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | easing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | easing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: revert;
transition: revert-layer;
transition: unset;

The transition property is specified as one or more single-property transitions, separated by commas.

Each single-property transition describes the transition that should be applied to a single property (or the special values all and none). It includes:

  • zero or one value representing the property to which the transition should apply. This may be any one of:
    • the keyword none
    • the keyword all
    • a <custom-ident> naming a CSS property.
  • zero or one <easing-function> value representing the easing function to use
  • zero, one, or two <time> values. 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 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.

Formal definition

Initial valueas each of the properties of the shorthand:
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Computed valueas each of the properties of the shorthand:
Animation typeNot animatable

Formal syntax

transition = 
<single-transition>#

<single-transition> =
[ none | <single-transition-property> ] ||
<time> ||
<easing-function> ||
<time>

<single-transition-property> =
all |
<custom-ident>

<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>

<linear-easing-function> =
linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? )

<linear-stop-list> =
[ <linear-stop> ]#

<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end

<linear-stop> =
<number> &&
<linear-stop-length>?

<linear-stop-length> =
<percentage>{1,2}

Examples

Simple example

In this example, when the user hovers over the element, there is a one-second delay before the four-second font-size transition occurs.

HTML

html

<a class="target">Hover over me</a>

CSS

We include two <time> values. In the transition shorthand, the first <time> value is the transition-duration. The second time value is the transition-delay. Both default to 0s if omitted.

css

.target {
  font-size: 14px;
  transition: font-size 4s 1s;
}

.target:hover {
  font-size: 36px;
}

There are several more examples of CSS transitions included in the Using CSS transitions article.

Specifications

Specification
CSS Transitions
# transition-shorthand-property

Browser compatibility

BCD tables only load in the browser

See also