animation-delay

animation-delay
CSS animation-delay Property
The CSS animation-delay property is used to delay the start of an animation. If a negative value is used(-Xs) the animation will start immediately, but be offset the amount of time specified. We can also use decimal values to set fractions of seconds if required.

NOTE: We must use browser specific prefixes until this property is standardized. Once this property is working in all browser software without prefixes, we can remove all of the prefixes. Use all four of the following prefixes, then add the standard property last. This assures it will work in most browsing environments even after this property is a standard.
-webkit-animation-delay (Chrome and Safari)
-moz-animation-delay (Firefox)
-ms-animation-delay (Internet Explorer)
-o-animation-delay (Opera)
animation-delay (Standard)

Delay an animation for 2 seconds:

<!DOCTYPE html>
<html>
<style type="text/css">
div#box1 {
    -webkit-animation-name: box-animate;
    -webkit-animation-delay: 2s;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 3;
    background:#D3F7FE;
    border:#000 1px solid;
    width:150px;
    height:150px;
    position:relative;
    left: 0px; 
    top: 0px;
}
@-webkit-keyframes box-animate {
    from { left: 0px; top: 0px; }
    to { left: 200px; top:200px; background:#000; color:#FFF; }
}
</style>
<body>
<div id="box1">BOX 1</div>
</body>
</html>
click here to code.
animation-delay

0 Response to "animation-delay"

Post a Comment
