CSS3 animation-delay Property


Example

Wait two seconds, then start the animation:

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

Try it yourself »

More "Try it Yourself" examples below.


Definition and Usage

The animation-delay property defines when the animation will start.

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

Tip: Negative values are allowed, -2s makes the animation start at once, but starts 2 seconds into the animation.

Default value: 0
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.animationDelay="1s" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
animation-delay 4.0 -webkit- 10.0 16.0
5.0 -moz-
4.0 -webkit- 15.0 -webkit-
12.1
12.0 -o-

CSS Syntax

animation-delay: time|initial|inherit;

Property Values

Value Description Play it
time Optional. Defines the number of seconds or milliseconds to wait before the animation will start. Default value is 0 Play it »
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Examples

More Examples


Example

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;
}

Try it yourself »

Related Pages

CSS3 tutorial: CSS3 Animations

HTML DOM reference: animationDelay property



SHARE THIS PAGE

COLOR PICKER

colorpicker





Search w3schools.com:

Translate w3schools.com: