Defines a length of time to elapse before an animation starts, allowing an animation to begin execution some time after it is applied.
Overview table0s
animationDelay
animation-delay: <time>
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.
ExamplesA delay of 5 seconds.
div.animationDelay {
animation-delay: 5s;
}
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%) }
}
Usage
*If animation-delay specifies more delays than there are values in animation-name, the excess delays are ignored.
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.Mozilla Developer Network : Article
Microsoft Developer Network: Windows Internet Explorer API reference Article
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