Animation Delay

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

CSS3 animation-delay Property


Wait two seconds, then start the animation:

div {
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-delay: 2s;


Definition and Usage

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

The animation-delay value is defined in seconds (s) or milliseconds (ms).

CSS Syntax

animation-delay: time|initial|inherit;
Value Description
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. Read about initial  
inherit Inherits this property from its parent element. Read about inherit

More Examples



Using negative values, notice that the animation starts 2 seconds into the animation cycle:

div {
    -webkit-animation-delay: -2s; /* Chrome, Safari, Opera */
    animation-delay: -2s;