Webzstore
The CSS 'animation-delay' property sets the time that elapses before an animation starts. This delay allows you to control when an animation begins after it has been applied to an element without altering the speed or duration of the animation itself. It's particularly useful for sequencing animations on a page or creating a timed effect in conjunction with user actions.
CSS 'animation-delay' Property Examples
See the Pen CSS 'animation-delay' Property by Webzstore (@webzstore) on CodePen.
The 'animation-delay' property offers a simple yet powerful way to add timing control to CSS animations, enabling creative sequencing and timing effects that can enhance the user experience of web pages.
Browser Support For 'animation-delay' Property
| Browser | Version | Released |
|---|---|---|
| Chrome | 43 | May 2015 |
| Edge | 12 | Jul 2015 |
| Firefox | 16 | Oct 2012 |
| Safari | 9 | Sep 2015 |
| Opera | 30 | Jun 2015 |
Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for animation-delay for the full compatibility details, including mobile browsers.
CSS Syntax of the 'animation-delay' Property
animation-delay: time;
Usage of the 'animation-delay' Property
Use 'animation-delay' when you want one or more animations to start at different times rather than all at once. Staggered start times can help create more complex and visually appealing animations. It's also useful for waiting until a particular moment to draw attention to an element with an animation.
Property Values of the 'animation-delay' Property
- Time: The amount of time to wait before starting the animation. This value can be specified in seconds (s) or milliseconds (ms). Negative values are also allowed, meaning the animation will start as if it had already been playing for that time.
