CSS3 animation-delay Property

Here is a brief description of how to specify a delay for the start of an animation in CSS3 using the CSS3 animation-delay property.

Explanation

Property :

animation-delay: time|initial|inherit;


Where,
time - Optional. Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start.Default value is 0. Negative values are allowed
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Usage:


animation-delay: 2s;

Definition:

The animation-delay property specifies a delay for the start of an animation.

Example :
<style>
.demodiv {
width: 50px;
height: 50px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:violet; left:0px; top:0px;}
25% {background-color:indigo; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
} </style>
<div class='demodiv'></div>

Result:



The above example has a 2 seconds delay before starting the animation.

Ask Questions

Ask Question