CSS Property animation-delay








The animation-delay property defines when to start animation in seconds (s) or milliseconds (ms).

Summary

Initial value
0
Inherited
no
CSS Version
CSS3
JavaScript syntax
object.style.animationDelay="1s"
Animatable
no

CSS Syntax

animation-delay: time;

Property Values

time(Optional)
set time in seconds(s) or milliseconds(ms) to wait before starting the animation will start. Default value is 0.

Browser compatibility

animation-delay 4.0 -webkit- 10.0 16.0 (5.0 -moz-) 4.0 -webkit- 15.0 -webkit- (12.0 -o-)




Example

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--   ww w .j  av  a2 s .  c o  m-->
    width: 100px;
    height: 100px;
    background: black;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
    animation-delay: 2s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}
</style>
</head>
<body>
    <div></div>

</body>
</html>

Click to view the demo