Check out a free preview of the full CSS In-Depth, v2 course:
The "CSS Animations Features" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Many animations can be solved with a bit of CSS instead of large JavaScript frameworks.

Get Unlimited Access Now

Transcript from the "CSS Animations Features" Lesson

[00:00:02]
>> 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:21] You could have much more granual control. It could be initiated on page load. It has more robust JavaScript hooks. It can be paused. And it's also the lowest priority on the UI thread. That means if you're loading 43 dependencies, and you have animations that start when that element is loaded and it has a delay.

[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.