transition-delay
CSS transition-delay Property
The CSS transition-delay property will offset the start of a transition by the amount of time specified. We can use decimal values to pinpoint fractions of a second. The default value is '0s', which means no offset to the start of the transition.
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-delay (Chrome and Safari)
- -moz-transition-delay (Firefox)
- -ms-transition-delay (Internet Explorer)
- -o-transition-delay (Opera)
- transition-delay (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, 1s, 1s;
}
div#myBox:hover {
background-color: magenta;
width: 300px;
height: 300px;
transition-delay: 2s, 1s, 3s;
}
</style>
<body>
<div id="myBox">hover on me to see transition delay</div>
</body>
</html>
The background-color received a 2 second delay, width received a 1 second delay, and height received a 3 second delay. You can place just one value there if all properties are to receive the same exact delay time.
0 Response to "transition-delay"
Post a Comment