Loading lesson path
Overview
CSS transitions allows you to change property values smoothly, over a given duration. Mouse over the element below to see a CSS transition effect:
To create a transition effect, you must specify the CSS property you want to add a transition to, and the duration of the transition.
transition property is a shorthand property for:
Formula
transition - property transition - duration transition - timing - function transition - delayFormula
The following example shows a 100px * 100px < div > element. The < div >element has specified a transition effect for the width property, with a duration of 2 seconds:
{
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}The transition is triggered when there is a change in the element's properties.
Formula
This often happens within pseudo - classes (:hover, :active, :focus, or:checked). So, from the code above, the transition effect will start when the width property changes value. Now, we add a div:hover class that specifies a new value for the width property when a user mouses over the <div> element:
{
width: 300px;
}Notice that when the cursor mouses out of the element, it will gradually change back to its original style.
You can change multiple properties by separating them by commas. The following example adds a transition effect for the width, height, and background-color properties, with a duration of 2 seconds for the width, 4 seconds for the height, and 3 seconds for the background-color:
Formula
Add a transition effect for the width, height, and background - color properties:div
{
transition: width 2s, height 4s, background-color 3s;
}The following table lists all the CSS transition properties:
Formula
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 - functionSpecifies the speed curve of the transition effect