Transition Duration, Timing & Deley Properties
The transition-duration property
The transition-duration tells us the time period for the transition to occur. The duration can be defined in seconds or milliseconds. We can enter multiple values if we are defining two or more properties.
EXAMPLE:
<html>
<head>
<style>
#flex-container { display: -webkit-flex;
display: flex; width: 500px; height: 500px;
background-color: Silver;
}
#flex-item {
background-color: lime;
transition-property: background, border-radius;
-webkit-transition-property: background, border-radius;
transition-duration: 2s, 6s;
-webkit-transition-duration: 2s, 6s;
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
width: 200px; height: 200px; margin: 20px;
}
#flex-item:hover { background: red; border-radius: 70%
}
</style>
</head>
<body>
<div id = "flex-container">
<div id = "flex-item">ASP.NET</div>
<div id = "flex-item">PHP</div>
</div>
</body>
</html>
We have defined the background, following which, we have defined border-radius as the second property with the transition-property. We have also defined the transition duration as 2s and 6s respectively.
OUTPUT:
If we hover the cursor over the PHP rectangle for two seconds, the color would change from lime to red in two seconds. The border radius would still be in a transition mode. After two seconds, the output would be as shown in the following screenshot:
After six seconds, the border-radius property transition would be complete, and we can see the change in the shape, as shown in the following screenshot:
The transition-timing-function property
The transition-timing-function property is used to define the speed of transition. If we set it to linear, it will be gradual at a constant speed. If we change the value from linear to ease-in, the transition is slow at First, and then it picks up speed during the process. However, if we choose ease-out, the speed initially is fast, and it slows down from then on.
EXAMPLE:
<html>
<head>
<style>
#flex-container { display: -webkit-flex; display: flex;
width: 500px; height: 500px;
background-color: Silver;
}
#flex-item {
background-color: lime;
transition-property: background, border-radius; transition-duration: 3s, 3s;
-webkit-transition-duration: 3s, 3s;
-webkit-transition-property: background, border-radius;
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
width: 200px; height: 200px; margin: 20px;
}
#flex-item:hover { background: red; border-radius: 70%
}
</style>
</head>
<body>
<div id = "flex-container">
<div id = "flex-item">ASP.NET</div>
<div id = "flex-item">PHP</div>
</div>
</body>
</html>
When we execute the preceding code, we can observe that the speed of transition is slow at irst, but the speed increases as the transition takes place. In place of ease-in, if we use ease-out, it starts quickly, but the speed decreases towards the end.
The transition-delay property
The transition-delay property is used to postpone the transition. If we set a transition-delay of two seconds, then the transition would start after two seconds. We can delay more than one property, by specifying multiple transition-delay values separated by a comma.
OUTPUT:
<html>
<head>
<style>
#flex-container { display: -webkit-flex; display: flex;
width: 500px; height: 500px;
background-color: Silver;
}
#flex-item {
background-color: lime;
transition-property: background, border-radius; transition-duration: 1s, 1s;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-property: background, border-radius; transition-timing-function: linear;
-webkit-transition-timing-function: linear;
transition-delay: 3s, 3s;
-webkit-transition-delay: 3s, 3s;
width: 200px; height: 200px; margin: 20px;
}
#flex-item:hover { background: red; border-radius: 70%
}
</style>
</head>
<body>
<div id = "flex-container">
<div id = "flex-item">ASP.NET</div>
<div id = "flex-item">PHP</div>
</div>
</body>
</html>
On executing the preceding code, we can see that there is a delay of three seconds before the transition begins. Hence, that explains the transition-delay property. Now, we will look at our next section, CSS3 transforms. Instead of defining each property individually, we can use transition:, which is a shortcut to define various values.
It can be defined as follows:
transition: background 3s linear, border-radius 2s ease-in 1s;
The transition-property, transition-duration, transition-timing-function, and lastly, transition-delay properties are defined at once in the order respectively.