A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://webplatform.github.io/docs/css/properties/animation-delay below:

animation-delay ยท WebPlatform Docs

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 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.
Related specifications
CSS Animations
Working Draft
See also Other articles Attributions

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4