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;
<div class="grid"> <div class="col"> <div class="cell"> <div class="t t1">transition: margin-right 4s;</div> </div> <div class="cell"> <div class="t t2">transition: margin-right 4s 1s;</div> </div> <div class="cell"> <div class="t t3">transition: margin-right 4s ease-in-out;</div> </div> <div class="cell"> <div class="t t4">transition: margin-right 4s ease-in-out 1s;</div> </div> <div class="cell"> <div class="t t5">transition: margin-right 4s, color 1s;</div> </div> <div class="cell"> <div class="t t6">transition: all 0.5s ease-out;</div> </div> </div> </div>
html,body { height: 100%; box-sizing: border-box; } .grid { width: 100%; height: 100%; display: flex; background: #EEE; font: 1em monospace; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: .5em; background-color: #FFF; overflow: hidden; } .t { background-color: #E4F0F5; color: #000; padding: .5rem; border-radius: .5rem; overflow: hidden; white-space: nowrap; } .grid:hover .t, .grid:active .t { background-color: #990099; color: #FFF; margin-right: 50%; } .t1 { transition: margin-right 4s; } .t2 { transition: margin-right 4s 1s; } .t3 { transition: margin-right 4s ease-in-out; } .t4 { transition: margin-right 4s ease-in-out 1s; } .t5 { transition: margin-right 4s, color 1s; } .t6 { transition: all 0.5s ease-out; }
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 |
Syntax
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.
- the keyword
- zero or one
<single-transition-timing-function>
value representing the timing function to use - zero, one, or two
<time>
values. The first value that can be parsed as a time is assigned to thetransition-duration
, and the second value that can be parsed as a time is assigned totransition-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 syntax
<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>)
Examples
There are several more examples of CSS transitions included in the main CSS transitions article.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'transition' in that specification. |
Working Draft | Initial definition |
Browser compatibility
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.