animation-delay

Jump to: navigation, search

animation-delay

This article is Almost Ready.


W3C Working Draft

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

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.

Compatibility

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
?
prefix
?
Unknown
10
Yes
12
prefix
12.10
Yes
4.0
prefix

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
prefix
5.0
prefix
16.0
Yes
?
Unknown
12
prefix
?
prefix


Examples

View live exampleA delay of 5 seconds.

CSS

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

View live exampleAn 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.

CSS

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%) }
}

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

Specification Status Related Changes
CSS Animations Working Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?


Compatibility notes

Browser Version Note
Internet Explorer 10.0 The -ms- prefixed property is deprecated and should not be used.

See also

Other articles

Attribution

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