The transition
CSS property is a shorthand property for transition-property
, transition-duration
, transition-timing-function
, and transition-delay
.
/* Apply to 1 property */ /* property name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration | timing function */ transition: margin-right 4s ease-in-out; /* property name | duration | timing 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: unset;
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.
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements, ::before and ::after pseudo-elements
|
Inherited | no |
Media | interactive |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
Canonical order | order of appearance in the formal grammar of the values |
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
all
<custom-ident>
naming a CSS property.<single-transition-timing-function>
value representing the timing function to use<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.
<single-transition>#where
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>where
<single-transition-property> = all | <custom-ident>
<single-transition-timing-function> = <single-timing-function>where
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)
There are several more examples of CSS transitions included in the main CSS transitions article.
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'transition' in that specification. | Working Draft | Initial definition |
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support |
26 1 -webkit- |
12 12 -webkit- |
4 -moz- 49 -webkit- |
10 |
12.1 15 -webkit- 10.1 — 15 -o- |
6.1 3 -webkit- |
Gradients | No | Yes | No | 10 | No | No |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support |
Yes 2.1 -webkit- |
26 Yes -webkit- |
12 12 -webkit- |
4 -moz- 49 -webkit- |
10 |
12.1 15 -webkit- 10.1 — 15 -o- |
Yes 3.2 -webkit- |
Gradients | No | ? | Yes | No | 10 | No | No |
1. Before Firefox 57, transitions do not work when transitioning from a text-shadow
with a color specified to a text-shadow
without a color specified (see bug 726550).
2. Before Firefox 57, cancelling a filling animation (for example, with animation-fill-mode: forwards
set) can trigger a transition set on the same element, although only once (see bug 1192592 and these test cases for more information).
3. Before Firefox 57, the background-position
property can't be transitioned between two values containing different numbers of <position>
values, for example background-position: 10px 10px;
and background-position: 20px 20px, 30px 30px;
(see bug 1390446).
4. From version 44: this feature is behind the layout.css.prefixes.webkit
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transition