This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

animation-delay

Summary

Defines a length of time to elapse before an animation starts, allowing an animation to begin execution some time after it is applied.

Overview table

Initial value
0s
Applies to
All elements, ::before and ::after pseudo-elements
Inherited
No
Media
visual
Computed value
As specified.
Animatable
No
CSS Object Model Property
animationDelay
Percentages
N/A

Syntax

  • animation-delay: <time>

Values

<time>
Can be specified in seconds or milliseconds, e.g., 2s or 150ms. Can also be a comma-separated list of delays, e.g., .25s, .5s, 1s, where each delay is applied to the corresponding ordinal position value of the animation-name property.

If the value is negative the animation will execute the moment it is applied, but will begin execution at the specified offset. That is, the animation appears to begin part-way through its cycle.

Examples

A delay of 5 seconds.

div.animationDelay {
    animation-delay: 5s;
}

View live example

An example of a mobile-like interface in which concurrent moveContent and insertBanner animations introduce a colored banner header after a 4-second delay. A subsequent scrollBanner animation uses a similar delay to start 5 seconds after the page loads.

article {
    animation-name : moveContent;
    animation-duration : 1s;
    animation-delay : 4s;
    animation-iteration-count : 1;
    animation-fill-mode : forwards;
}

header {
    animation-name : insertBanner , scrollBanner;
    animation-duration : 1s , 20s;
    animation-delay : 4s , 5s;
    animation-fill-mode : backwards , none;
    animation-iteration-count : 1 , infinite;
}


@keyframes moveContent {
    from { transform : translateY(0em) }
    to   { transform : translateY(3em) }
}

@keyframes insertBanner {
    from { transform : translateY(-6em) }
    to   { transform : translateY(0em) }
}

@keyframes scrollBanner {
    from { transform : translateX(0) }
    17%  { transform : translateX(0%) }
    20%  { transform : translateX(-20%) }
    37%  { transform : translateX(-20%) }
    40%  { transform : translateX(-40%) }
    57%  { transform : translateX(-40%) }
    60%  { transform : translateX(-60%) }
    77%  { transform : translateX(-60%) }
    80%  { transform : translateX(-80%) }
    97%  { transform : translateX(-80%) }
    to   { transform : translateX(0%) }
}

View live example

Usage

 *If animation-delay specifies more delays than there are values in animation-name, the excess delays are ignored.
  • If animation-delay specifies fewer delays than there are values in animation-name, the list of delays is repeated as many times as needed to map each animation to a delay.

Related specifications

CSS Animations
Working Draft

See also

Other articles

Attributions