HTML and CSS Reference
In-Depth Information
Syntax
transition-delay: time1 [,..timeN]
where time is a standard CSS time value like 2s or 4700ms. The default value is 0, meaning
the animation starts immediately. If the delay is a negative number, the animation starts
immediately but begins at the point it would be at if it were already running since the
negative number.
Example
<div id="d1" style="-webkit-transition-property: all;
-webkit-transition-delay: 1s;
transition-property: all;
transition-delay: 1s;
background-color: red;
height: 100px;
width: 100px;
text-align: center;">
Click me
</div>
Compatibility
CSS3 Proposed
Chrome 2+, Firefox 3.7+, Safari 3.1+
Note
• WebKit supports this property as
-webkit-transition-delay
. Firefox browsers
would use a
-moz
prefix.
• Firefox support is based upon a pre-release version currently numbered as 3.7,
though this is subject to change.
transition-duration
This property is used to define the time it takes one iteration of an animation to play.
Syntax
transition-duration:
time
[,
time
]*
where
time
is a valid time value like 5s or 3500ms. The default value of
time
is 0, meaning no
animation plays.
Example
<div id="d1" style="-webkit-transition-property: height, width;
-webkit-transition-duration: 1s, 3s;
transition-property: height, width;
transition-duration: 1s, 3s;
background-color: red;
height: 100px;
width: 100px;
text-align: center;">
Click me
</div>
