HTML Style Animation Delay Property | HTML Animation Delay Tutorial By WDH

HTML Style Animation Delay Property


Animation-delay
By default, the animation will start immediately. 
Specifying an animation-delay will delay the start of the animation by the time given. 
Can be specified in seconds or milliseconds. 
A negative value can be given for animation-delay. 
If a negative time value is given, the animation will start immediately at the given point of elapsed time. 
For example, 
if an animation has a duration of 1s, and the delay is given as -500ms, the animation will start immediately at the 500ms mark.
Syntax - 
animation-delay: time|initial|inherit;
Here we will see the meaning of the last two values -
1. initial
It changes all the properties applied to the element or the parent value to their initial value.
2. inherit
It changes all the properties applied to the element or the parent to the parent’s value.
Now we will see Example -
Example - We will see a box moving with changing size and color - 
<!DOCTYPE html>
<html>
<style type="text/css">
@-webkit-keyframes move {
from {width: 100px; height: 300px;
left: 0; top: 0;}
50% {width: 100px; height: 300px;
left: 300px; top: 0;}
to {width: 100px; height: 300px;
left: 300px; top: 300px;}
}
@-webkit-keyframes resize {
from {width: 100px; height: 300px;
left: 300px; top: 300px;}
50% {width: 100px; height: 100px;
left: 300px; top: 300px;}
to {width: 300px; height: 100px;
left: 300px; top: 300px;}
}
#anim1 {-webkit-animation-name:move, resize;
-webkit-animation-duration: 4s, 4s;
-webkit-animation-delay: 0s, 4s;
position:absolute;
background-color: purple;}
</style>
<body>
    <div id="anim1">Watch me move and change size!</div>
    </body>
    </html>
Output - A sample output can be  -