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.


< css‎ | properties
Jump to: navigation, search


This article is Ready to Use.

W3C Working Draft


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


  • animation-delay: <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.


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


 *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

Specification Status Related Changes
CSS Animations Working Draft

See also

Other articles


This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article

Portions of this content come from the Microsoft Developer Network: Windows Internet Explorer API reference Article