CSS3 transition helps to change property values smoothly. CSS3 transition Properties needs mouse activity to start.
There are following CSS3 transition properties
- transition-delay.
- transition-duration.
- transition-property.
- transition-timing-function.
transition-delay.
The value defines the time to be taken to start changing property values. The values can be in milliseconds, seconds, minutes etc.
Example:
transition-delay: 3s;
above example will start transition after 3 seconds.
transition-duration.
The value defines the time to be taken to complete the transition.
Example:
transition-duration: 5s;
In above example, transition will take 5 seconds to complete the transition.
transition-property.
The value defines the property on which transition is to be applied.
Example:
transition-property:color;
Above example will target the color property.
transition-timing-function.
Explanation of transition-timing-function
Transition.
This is a shorthand notation in which value of all transition properties can be written.
Example
transition: color 2s linear 3s;
In above example.
transition-property:color;
transition-duration: 2s;
transition-timing-function:linear;
transition-delay: 3s;
Transition properties Example
<html>
<head>
<style>
div#div2 {
padding:0.1px;
width: 100px;
height: 100px;
text-align: center;
font-size:40px;
background: red;
transition: width 1s, height 1s, background 10s, color 5s 3s;
border-radius:50%
}
div#div2:hover {
width: 150px;
height:150px;
background:black;
color:white;
}
</style>
</head>
<div id=”div2″><b>hi</b></div>
</body>
</html>
Hover the mouse on a red circle.
Note: In above example you have seen color 5s 3s; where 3s is transition delay.
