HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
CSS transitions allows you to change property values smoothly, over a given duration
CSS transitions allows you to change property values smoothly, over a given duration.
In this chapter you will learn about the following properties:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-functionThe numbers in the table specify the first browser version that fully supports the property.
| 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 |
To create a transition effect, you must specify two things:
The following example shows a 100px * 100px red <div> element. The <div> element has also specified a transition effect for the width property, with a duration of 2 seconds:
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 <div> element:
div:hover
{
width: 300px;
}
Notice that when the cursor mouses out of the element, it will gradually change back to its original style.
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:
div
{
transition: width 2s, height 4s;
}
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 functionThe following example shows some of the different speed curves that can be used:
#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;}
The transition-delay property specifies a delay (in seconds) for the transition effect.
The following example has a 1 second delay before starting:
div {
transition-delay: 1s;
}
The following example adds a transition effect to the transformation:
div {
transition:
width 2s, height 2s, transform 2s;
}
The CSS transition properties can be specified one by one, like this:
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
or by using the shorthand property transition:
div
{
transition: width 2s linear 1s;
}
Add a 2 second transition effect for width changes of the <div> element.
<style>
div {
width: 100px;
height: 100px;
background: red;
: ;
}
div:hover {
width: 300px;
}
</style>
<body>
<div>This is a div</div>
</body>
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 |