CSS Transitions
CSS transitions allows you to change property values smoothly, over a given duration.
Mouse over the element below to see a CSS transition effect:
In this chapter you will learn about the following properties:
transition
transition-delay
transition-duration
transition-property
transition-timing-function
Browser Support for Transitions
The numbers in the table specify the first browser version that fully supports the property.
transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
How to Use CSS Transitions?
To create a transition effect, you must specify two things:
- the CSS property you want to add an effect to
- the duration of the effect
Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.
The following example shows a 100px * 100px red
Example
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
The transition effect will start when the specified CSS property [width] changes value.
Now, let us specify a new value for the width property when a user mouses over the
Notice that when the cursor mouses out of the element, it will gradually change back to its original style.
Change Several Property Values
The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height:
Specify the Speed Curve of the Transition
The transition-timing-function
property specifies the speed curve of the transition effect.
The transition-timing-function property can have the following values:
ease
- specifies a transition effect with a slow start, then fast, then end slowly [this is default]linear
- specifies a transition effect with the same speed from start to endease-in
- specifies a transition effect with a slow startease-out
- specifies a transition effect with a slow endease-in-out
- specifies a transition effect with a slow start and endcubic-bezier[n,n,n,n]
- lets you define your own values in a cubic-bezier function
The following example shows some of the different speed curves that can be used:
Example
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Try it Yourself »
Delay the Transition Effect
The
transition-delay
property specifies a delay [in seconds] for the transition effect.
The following example has a 1 second delay before starting:
Transition + Transformation
The following example adds a transition effect to the transformation:
More Transition Examples
The CSS transition properties can be specified one by one, like this:
Example
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Try it Yourself »
or by using the shorthand property transition
:
CSS Transition Properties
The following table lists all the CSS transition properties:
transition | A shorthand property for setting the four transition properties into a single property |
transition-delay | Specifies a delay [in seconds] for the transition effect |
transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
transition-property | Specifies the name of the CSS property the transition effect is for |
transition-timing-function | Specifies the speed curve of the transition effect |