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
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: rgb(36,110,164);
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 100%;
}
</style>
</head>
<body>
<div></div>
<p>Hover over the div element, to see the transition effect.</p>
</body>
</html>
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.
0 Comment(s)