Contact Us | +1 888 239-0733 (Toll free US/CA) Mon-Fri: 7:30am to 4:30pm (PST)
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.
See the Pen
CSS 'animation-delay' Property by Webzstore (@webzstore)
on CodePen. The ' 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.CSS 'animation-delay' Property Examples
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
16.0
5.0 -moz-9.0
4.0 -webkit-43.0
4.0 -webkit-10.0 30.0
15.0 -webkit-
12.0 -o-CSS Syntax of the 'animation-delay' Property
animation-delay: time;
Usage of the 'animation-delay' Property
Property Values of the 'animation-delay' Property
"*" indicates required fields
