The transition-delay property, often used as part of transition shorthand, is used to define the time to delay the start of a transition.
Syntax:
selector {
transition-delay: time | initial | inherit;
}
Values:
Possible values for transition-duration property are:
- time; Specifies the waiting period before starting the transition effect in seconds or miliseconds, with 0 being default.
- initial, inherit
The default value for transition-delay is 0; meaning that no delay will take place and the transition will start to occur immediately. The time value can be expressed as a decimal-based number for more precise timing. When a transition has a delay value that is negative, it will cause the transition to begin immediately (with no delay); however the transition will begin partway through the process, as though it had already begun. Besides a length (number) format, the value may also be initial or inherit.
Example
The transition-delay property example:
<html>
<head>
<style type="text/css">
body {
font-family:Arial; color:#eee;
background-color:#e3333e;
}
div {
width: 60%; height:80px; margin:40px 20%;
background-color: lightblue;
box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.15);
transition-delay: 0s;
transition-delay: 0s; /* Safari */
transition-delay: 0s; /* Safari */
transition-duration: 4000ms;
transition-duration: 4000ms; /* Safari, Chrome */
transition-property: 4000ms; /* Firefox */
transition-property: box-shadow;
transition-property:box-shadow; /* Safari, Chrome */
transition-property: box-shadow; /* Firefox */
}
div:hover {
box-shadow: 0px 0px 0px 200px rgba(0,0,0,0.15);
}
</style>
</head>
<body>
<h3>Hover over the box and to see the transition delay effect in action:</h3>
<div></div>
</body>
</html>
Comments
No comments have been made yet.
Please login to leave a comment. Login now