CSS3 animation-delay Property

Example

Wait two seconds, then start the animation:

______________________________________________________________________________

animation-delay:2s;
-moz-animation-delay:2s; /* Firefox */
-webkit-animation-delay:2s; /*Safari and Chrome */

______________________________________________________________________________

Try it yourself »

More examples at the bottom of this page.

---

Browser Support

The animation-delay property is not supported in any of the major browsers.

Firefox supports an alternative, the -moz-animation-delay property.

Safari and Chrome support an alternative, the -webkit-animation-delay property.

---

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
Version:	CSS3
JavaScript syntax:	object.style.animationDelay="2s"

---

Syntax

animation-delay: time;

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 »

---

Try it Yourself - Examples

Example

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

______________________________________________________________________________

animation-delay: -2s
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari and Chrome */

______________________________________________________________________________

Try it yourself »

Posted in: Animation-delay,Blog,CSS