Check out a free preview of the full CSS In-Depth, v2 course:
The "Naming Animations & Specificity" 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:

Estelle shows how to name an animation and apply it to an element. Estelle also discusses the order of animations and specificity.

Get Unlimited Access Now

Transcript from the "Naming Animations & Specificity" Lesson

[00:00:02]
>> Estelle Weyl: Okay, so, so far, we've talked about the key frames, but we haven't actually animated anything. We've just created the key frame animation. We gave it a name and that name is what you're going to use to attach it to an element. So the only thing that is required to make an animation work is the animation name cuz there are default values for everything.

[00:00:21] So if you recall when we over wrote the important we just give you the animation name and then the keyword forwards. And I'll talk about forwards but forwards makes stuff stand at 100% mark. It's all we did. We just said and it worked, right? There was only two properties to clear the name and one other thing.

[00:00:38] So we have a Base CSS, which is our pencil, the width is 100 pixels, the text align to the right, the border bottom is 10 pixels cuz I wanna make it look like it's drawing the little border in the bottom. And then after I put the pencil in position, I wanted the pencil to be lower than it would be, so that's why I put it in the after.

[00:00:57] And then I have this key frame called drawALine, and it goes from 0 to 100%. With a width of 0 and the width is 100%, where it goes from green to blue. But I didn't attach it to the pencil yet, right? The pencil doesn't have an animation. So let's attach the animation.

[00:01:14] I say animation draw and a line and duration three seconds. If there's not duration, it's zero seconds and it's kind of a moot point. So here it's going from green to blue over six seconds. Want to see that again? Let's make it faster so we're not as annoyed.

[00:01:32] Over three seconds. So I gave it the animation name, and a duration. By default it only happens once. First it does the first one, second and then third. So it's actually blue, because the blue overwrote the background color property for the green and the red. So if you have many key frame animations with the same property going on at the same time.

[00:01:57] Cuz you can have multiple animations on them at the same time. Which ever one is declared last, that would be the property. Okay,
>> Estelle Weyl: We already talked about specificity, but in case someone is coming to this deck without doing the whole deck,
>> Estelle Weyl: The CSS can overwrite important, so just know that animations will work even if there's a declaration of important on the property originally.

[00:02:29] So here I did say that I want the boarder to be black and solid and 5 pixels. But because I have a key frame animation going on it's actually changing from red to orange because the animation right now is active.
>> Estelle Weyl: And I already covered this as well.

[00:02:52] Do not include important in your key frame animations, that will not work.