transition-duration
CSS transition-duration Property
The CSS transition-duration property specifies how long a transition will take. View it as your transition speed factor. We can use decimal numbers to pinpoint fractions of a second if needed. We can set each property separately or give them each the same exact duration. Duration can also be set independently in both a hover state and normal state.
NOTE: We must use browser specific prefixes until this property's standard syntax is working in all browser software. Use all four of the following prefixes, then add the standard property last. This assures it will work in most browsing environments.
- -webkit-transition-duration (Chrome and Safari)
- -moz-transition-duration (Firefox)
- -ms-transition-duration (Internet Explorer)
- -o-transition-duration (Opera)
- transition-duration (Standard)
<!DOCTYPE html>
<html>
<style type="text/css">
div#myBox {
background-color: turquoise;
width: 200px;
height: 200px;
transition-property: background-color, width, height;
transition-duration: 1s; /* same as 1s, 1s, 1s */
}
div#myBox:hover {
background-color: yellow;
width: 300px;
height: 300px;
}
</style>
<body>
<div id="myBox">hover on me to see transition duration of 1 second both forward and reverse</div>
</body>
</html>
0 Response to "transition-duration"
Post a Comment