transition
Quick Summary for transition
transition
CSS property is a shorthand property for transition-property
, transition-duration
, transition-timing-function
, and transition-delay
.
Code Usage for transition
/* 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: unset;
More Details for transition
transition
The transition
CSS property is a shorthand property for transition-property
, transition-duration
, transition-timing-function
, and transition-delay
.
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:
transition-delay
transition-duration
transition-property
transition-timing-function
Syntax
/* 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: 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:
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 value | as each of the properties of the shorthand:transition-delay : 0s transition-duration : 0s transition-property : alltransition-timing-function : ease |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Computed value | as each of the properties of the shorthand:transition-delay : as specifiedtransition-duration : as specifiedtransition-property : as specifiedtransition-timing-function : as specified |
Animation type | discrete |
Formal syntax
<single-transition>#where
<single-transition> = [ none | <single-transition-property> ] || <time> || <easing-function> || <time>
where
<single-transition-property> = all | <custom-ident><easing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
Examples
Simple example
This example performs a four-second font size transition with a one-second delay when the user hovers over the element.
HTML<a class="target">Hover over me</a>
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 Level 2 # transition-shorthand-property |
See also
Using CSS transitionsTransitionEvent
Last modified: Jan 18, 2022, by MDN contributors
Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体)正體中文 (繁體) Change language