CSS Transitions
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:
The CSS transition Property
To create a transition effect, you must specify the CSS property you want to add a transition to, and the duration of the transition.
The CSS transition
property is a shorthand property for:
transition-property(Required)transition-duration(Required)transition-timing-functiontransition-delay
CSS Transition Example
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:
Example
div
{
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}
How to Trigger the Transition
The transition is triggered when there is a change in the element's properties. 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:
Notice that when the cursor mouses out of the element, it will gradually change back to its original style.
Change Multiple Property Values
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:
Example
Add a transition effect for the width, height, and background-color properties:
div
{
transition: width 2s, height 4s, background-color 3s;
}
Try it Yourself »
CSS Transition Speed Curve
The
transition-timing-function property specifies the speed curve of the transition effect.
This property can have one of the following values:
ease- transition will start slow, then go fast, and end slow (this is default)linear- transition will keep the same speed from start to endease-in- transition will start slowease-out- transition will end slowease-in-out- transition will have 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
Some different speed curves for transition:
#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 »
CSS Transition Delay
The transition-delay property specifies a delay
before the transition starts.
The transition-delay value is defined in
seconds (s) or milliseconds (ms).
The following example has a 1 second delay before starting:
Transition + Transform
The following example combines transition and transform for a <div>:
Example
div {
transition:
width 2s, height 2s, background-color 2s, transform 2s;
}
Try it Yourself »
The following example combines transition and transform for a button:
Example
button {
transition: background-color 1s ease-out, transform 1s
ease-out;
}
Try it Yourself »
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:
| Property | Description |
|---|---|
| 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 |
