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

Keyframe animations can be named and define the duration and properties animating to using percentage values. Estelle demos the ability to create animations that animate properties between keyframes.

Get Unlimited Access Now

Transcript from the "@keyframes" Lesson

[00:00:01]
>> Estelle Weyl: So keyframe starts with the word @keyframes.
>> Estelle Weyl: And then you give it a name. It used to have to be, I need to remove this. It can be coded now. It used to be an ident, but now can be a string. If it's an ident, the characters that are valid are a through z lowercase, uppercase, zero through nine, the dash, the underscore.

[00:00:27] And any ISO 10646 character of u plus 00A0 and higher, which means you can basically use emoticons as animation names.
>> Estelle Weyl: It can't start with zero through nine, it can't start with a digit, two hyphens or a hyphen plus a digit. And you can actually give it escape characters in the name.

[00:00:59] So Q n% bank can be written as Q with a slash n% A slash. I don't know why you would wanna do this but I just wanna be thorough. Just don't use keyterms, keyterms are completely legal to use. One of the properties for, whether animation play state is either running or paused.

[00:01:24] You don't know how many people have tried to use the animation name of running. And then been like, why isn't my animation working? Because they only declared that it was running in terms of the play state and the never declared the animation name. So avoid them, it's not that they are illegal, just avoid them because they will give you a headache.

[00:01:43]
>> Estelle Weyl: So what's in the name? I actually called this, the animation name for this is Pencil.
>> Estelle Weyl: You can do that, I don't know why you would want to, but you can. I just wanted to show that you could. And I also want to make it a little bit more fun at this time of day, so-

[00:02:04]
>> Estelle Weyl: KeyFrame at-rule, and then the name of the animation, either with or without quotes.
>> Estelle Weyl: And I don't know why I called it slides, and then opening and closing bracket. And then all of your key frames are gonna go in between those. So here we have animation of called writing.

[00:02:22] And where this goes from left at 0 to left at 100%, and just goes across the page. So this is a key frame, it starts with the word from and it goes to to. Each of these are times, this is 0% and 100%. You could've written 0% and you could've written 100%.

[00:02:39] You need to have at least 1 key frame. I'm going to change size because this pencil's annoying me. And I'm gonna go over here and hope that it goes stops, thank you. [SOUND] Okay, so you can do 0 or 100%. Don't forget the percent right here, it's required, zero's not valid.

[00:03:03] And you can't quote the animation name, so after they got slide. So there is 0% and an 100%. If you leave them out, it will still animate. So right now I have a div in the background code as red. In the background, the border is 1 pixel wide.

[00:03:24] Over ten seconds I do the animation, the animation goes from 0 to 100%. And at the 45% mark, I want the background to be green. At the 55% mark, I want the background color to be blue. And I want the border to go from 1 pixel to 10 pixels to 20 pixels.

[00:03:45] Because I did not declare the 0% mark or the 100% mark, they're interpolated from the default values, or from the values that are on the element. So it's as if I wrote, 0%, 100%, and I put-
>> Estelle Weyl: Okay, so that animation did not change. I could make it orange so you can see that is active.

[00:04:25]
>> Estelle Weyl: Yeah, so you see that it's actually the active slide, right? So it actually puts in the 0% and the 100% mark for you using the values that it would've had when the animation was not attached, okay. So then, that was using 0, 45, 55, and 100%. So that's basically more granular control.

[00:04:50] So here I'm writingWhileTired, so I'm going 0%, left is 0, at 10% is gone 45% way cross. And then at the 90% mark, it's only gone 10% of the way across the page. So let's say it's a 1,000 pixels wide, it's only moved 100 pixels over 80% of the animation, and then it goes to the 100% mark.

[00:05:16] So the reason I call this writing while tired, have you ever written while you were falling asleep. And then you look at your thing that you wrote and you're like what did I write, that's what this reminded me of so. Okay,
>> Estelle Weyl: So-
>> Estelle Weyl: We already talked about this yesterday during this lecture and specificity where important and isn't really that important.

[00:05:37] You never want to put an important inside an animation, it's ignored. So this 55% mark, it never turned blue
>> Estelle Weyl: Important doesn't work in your keyframe animation.
>> Estelle Weyl: But if I do red important, it's still gonna turn green, remember that? Okay, so important isn't important, doesn't work at all, if it's in your animation keyframe.

[00:06:08] But it can be overwritten by an animation. You can animate multiple properties, everything so far have been basically animating the background color I think or the left here. I've set at 0% make the left and top zero, so it starts off here. At the 25% mark and the 75% mark, the pencil should be down 400 pixels.

[00:06:34]
>> Estelle Weyl: At the 100% mark, up here, so it's going from right to left the whole time, as going up and down in between. So, I don't have to declare the left in every single key frame. I've already declared the left twice and it's 0% mark and 100% mark.

[00:06:50] But it's have been much more gradual control the top and bottom, right.
>> Estelle Weyl: Then you can have duplicate keyframes. So here, I said 45, 45, 55, 55, that's legal.
>> Estelle Weyl: Yep, it's changing to blue and it's changing the opacity, we're good. Duplicates the keyframes, it's fine. And you can also do, if you have the exact same value for something, you can do 55%.

[00:07:24] And we saw that when I did the 100% and the 0% originally.
>> Estelle Weyl: And you can animate transforms, which is usually what you wanna do. Because when I animated the left, you don't really wanna animate the left or the top properties because you're repainting the page. You're transforming it, when it's transformed it's on the GPU, it's in its own space and it works much much better.

[00:07:54] You don't wanna do anything that causes a reflow. So if you're making something bigger, you're repainting the whole page.