Transition properties allows you to change the values of a element over a predefined duration, animating the property changes, as opposed to having them happen instantly. Over a given duration, CSS3 transition property permits to change property estimations easily starting from one value to another.
You need to indicate following two steps while creating a transition effect,
- the CSS property to which you want to add an effect
- the duration of the effect
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
<p>Hover over the div element, to see the transition effect.</p>
Note :- This example does not work in Internet Explorer 9 and earlier versions.
Transition Property allows you to control animation speed. There are following four properties to control transition :-
- transition-property :- It allows the name or names of the CSS properties.
- transition-duration :- Determines how long or milliseconds of time the transition effect takes to finish.
- transition-timing-function :- Determines the speed curve of the transition effect.
- transition-delay :- Defines to what extent to hold up between the time a property is changed and the move really starts.