From the course: CSS: Animation

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

animation-delay and animation-fill-mode

animation-delay and animation-fill-mode - CSS Tutorial

From the course: CSS: Animation

Start my 1-month free trial Buy for my team

animation-delay and animation-fill-mode

“

- [Instructor] Let's look at how properties like animation-delay and animation-fill-mode can help us do more with our key frame animations. Both of these properties are ones I use a lot in my work and I bet you'll find them super useful too. We'll start with animation-delay. It works exactly like transition-delay except it's applied to key frame animations. Animation-delay lets you specify a certain amount of time that should pass before the key frame animation takes effect on the object you've applied it to. Let's add a delay to the text animation we've been working on to see how it works. We'll go to our h2 rule and add one more animation property, and that property is animation-delay, and I'll give it a delay of five seconds, which is probably excessively long in most cases, but that way, we'll really be able to see what's happening. Now when we refresh the page, there's a five second delay before animation starts.…

Contents