CSS Transitions
- Previous Page CSS 3D Transformations
- Next Page CSS Animations
CSS Transitions
CSS transitions allow you to smoothly change the value of properties over a given time.
Move the mouse over this element to view the CSS transition effect:
In this chapter, you will learn the following properties:
transition
transition-delay
transition-duration
transition-property
transition-timing-function
Browser support for transitions
The numbers in the table indicate the first browser version that fully supports this property.
properties | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
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 clearly define two things:
- The CSS property you want to add the effect to
- Duration of the effect
Note:If the duration part is not specified, the transition will not take effect because the default value is 0.
The following example shows a red <div> element with a size of 100px * 100px. The <div> element also specifies a transition effect for the width property, lasting for 2 seconds:
Example
div { width: 100px; height: 100px; background: red; transition: width 2s; }
A transition effect will begin when the value of the specified CSS property (width) changes.
Now, let's specify a new value for the width property when the mouse hovers over the <div> element:
Example
div:hover { width: 300px; }
Please note that when the cursor is moved away from the element, it will gradually return to its original style.
Change Values of Several Properties
The following example adds transition effects to both width and height properties, width is 2 seconds, and height is 4 seconds:
Example
div { transition: width 2s, height 4s; }
Specify the speed curve of the transition
transition-timing-function
The property specifies the speed curve of the transition effect.
The transition-timing-function property accepts the following values:
ease
- Specifies a transition effect that starts slowly, then accelerates, and then ends slowly (default)linear
- Specifies a transition effect that has the same speed from start to endease-in
- Specifies a transition effect that starts slowlyease-out
- Specifies a transition effect that ends slowlyease-in-out
- Specifies a transition effect that starts and ends slowercubic-bezier(n,n,n,n)
- Allows you to define your own values in the cubic Bezier function
The following examples show some 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;}
Delay Transition Effect
transition-delay
The property specifies the delay of the transition effect (in seconds).
The following example has a 1-second delay before starting:
Example
div { transition-delay: 1s; }
Transition + Transform
The following example adds a transition effect to the transform:
Example
div { transition: width 2s, height 2s, transform 2s; }
More Transition Examples
You can specify CSS transition properties one by one, as shown below:
Example
div { transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; }
Or use the shorthand transition
Properties:
Example
div { transition: width 2s linear 1s; }
CSS Transition Properties
The following table lists all CSS transition properties:
properties | description |
---|---|
transition | A shorthand property used to set the four transition properties as a single property. |
transition-delay | Specify the delay of the transition effect (in seconds). |
transition-duration | Specify how many seconds or milliseconds the transition effect should last. |
transition-property | Specify the name of the CSS property targeted by the transition effect. |
transition-timing-function | Specify the speed curve for the transition effect. |
- Previous Page CSS 3D Transformations
- Next Page CSS Animations