transition
The transition
property is a shorthand property for setting the longhand properties: transition-property
, transition-duration
, transition-timing-function
, and transition-delay
.
The order of properties within the transition
property is important, and should be the same order as the one mentioned above. 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
.
You can specify either one transition in the transition
property, or multiple comma-separated transitions. For example:
/* one transition */ transition: background-color .3s linear; /* multiple transitions */ transition: color .6s ease, font-size .3s linear; transition: background-color 1s linear, left .6s ease-out 1s, transform 1s steps(3, start);
If you specify more than one transition and any of the transitions has none
as the transition-property
, then the declaration is invalid.
Trivia & Notes
CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. A transition is defined on an element to animate the change of values on certain properties of an element smoothly, instead of changing the values abruptly. Transition are useful to help cue the user that a change is happening, thus allowing them to know what and how the changes occur. They are used to smooth certain interactions in web pages and applications, allowing for an overall better and more meaningful user experience.
Transitions are widely used in user interface interactions today. There is a very long list of great tutorials here on Codrops that use transitions to create different kinds of effects. Make sure you check the tutorials out.
Not all properties in CSS can be transitioned. The W3C has a list of animatable types and properties in the CSS Transitions Module. Oli Studholme has also created a list of animatable CSS properties on his website that you can check out.
Official Syntax
-
Syntax:
transition: <single-transition> [ "," <single-transition> ]* where <single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>
- Initial: none 0s ease 0s; which is the concatenation of the initial value of each of the longhand properties.
-
Applies To: all elements; and
::before
and::after
pseudo-elements - Animatable: no
Values
- <single-transition>#
- One or multiple comma-separated transitions where each transition is defined using the four longhand transition properties. See the longhand properties’ entries for more information about the possible values for each.
Examples
The following defines two transitions on an element: moving its position and changing its background color when it is hovered. The change transition in the background color occurs after the transition of the position.
.element { position: relative; left: 0; background-color: purple; transition: left 1s ease-in-out, background-color 1s ease-out 1s; }
See the live demo section below for an example.
Live Demo
View this demo on the Codrops PlaygroundBrowser Support
CSS3 Transitions
Simple method of animating certain properties of an element, with ability to define property, duration, delay and timing function.
W3C Working Draft
Supported from the following versions:
Desktop
- 26
- 16
- 10
- 12
- 6.1
Mobile / Tablet
- 7.0
- 4.4
- No
- 66
- 60
Further Reading
- CSS Transitions Module
- All You Need To Know About CSS Transitions by Alex Maccaw
- Using CSS3 Transitions: A Comprehensive Guide
- Thank God We Have A Specification! (Quirks and issues you should be aware of when working with CSS3 transitions)