It allows us to change one property values with another property values very smoothly. It happens over a specified duration. For transition effect, we have to consider following two points. As- (i) The CSS property that we want to add an effect to. (ii) The duration of the effect.
If duration part is not mentioned, the transition will have no effect, because it’s by default value is 0. The example below shows a 50px * 50px blue <div> element. The <div> element has also mentioned in a transition effect for the width property, with duration of 3 seconds:
Example-
div{
width: 50px;
height: 50px;
background: blue;
-webkit-transition: width3s; /* statement supported by Safari Browser*/
transition: width3s;
}
The transition effect will start when the specified or mentioned width CSS property changes its value. In the following example a new value 200 specified as width property when user mouses over the element <div> element:
Example-
div:hover{
width: 200px;
}
When cursor moves out of the element, it will steadily come back to its original style. The example below adds a transition effect for the width and height both property, in duration of 3 seconds for the width & 5 seconds for the height-
Example-
div{
-webkit-transition: width 3s, height 5s; /* statement supported by Safari Browser*/
transition: width3s,height5s;
}
To Delay the Transition Effect-
It is mentioned a delay in seconds for the transition effect. The example below has a 2 second delay before starting.
Example-
div{
-webkit-transition-delay: 2s; /* statement supported by Safari Browser*/
transition-delay: 2s;
}
Transition and Transformation-
The example below combines or adds a transformation to the transition effect.
Example-
div{
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* statement supported by Safari Browser*/
transition: width2s, height2s, transform2s;
}
Following are the some examples of Transition and the property of CSS3 transition can be specified one by one, as-
Example-
div{
transition-property: width;
transition-duration: 5s;
transition-timing-function: linear;
transition-delay: 2s;
}
We can also use following shorthand property too for transition-
Example
div{
transition: width5slinear2s;
}
Properties of CSS3 Transition-
The table below displays different properties of transition- As.
