Transcript from the "CSS Animations Features" Lesson
>> Estelle Weyl: Let's cover animations. The thing with animations is unlike transitions, with transitions you could just do a single animation, with animations you can do single or many or an infinite number. It can be in one direction from 0 to 100% mark or go from 0 to a 100% and then 100% to 0.
[00:00:45] The delay will expire while you're loading, while your site. It's basically going to give everything else priority and then it might start in the middle of the animation. So you can either set the animations based on a class that you add to the body. Or you can get rid of all the stupid frameworks that you're adding for no apparent reason and making your page slow.
[00:01:05] Cuz you shouldn't be waiting four and a half seconds for your page to load, it should load and be completely done in less than 19 seconds. And so your animations that you did on page load should not be expiring. I don't have an opinion on it at all.
[00:01:19] Okay, so the essentials for keyframe animation is, one, to declare a keyframe. And a keyframe is something that you can reuse over and over again. And then, that is separate, that is is an app rule. And then on the element, you actually add the animation-name, duration, the timing-function, the iteration-count, the direction, the play-state, the delay, and the fill-mode.
[00:01:41] Or at the end we're gonna do the shorthand and you should definitely be using the shorthand because those are a lot too many properties to be putting on one element.