The full video and many others like it are all available as part of our Frontend Masters subscription.

Rachel Nabors

Rachel Nabors is a CSS animations fanatic and award-winning cartoonist. A regular conference speaker, she ignites new technology with her experience in visual storytelling.

Rachel Nabors

Award Winning Cartoonist

CSS animations change one or more CSS properties through the use of keyframes. Keyframes can be specified using the “from” and “to” keywords or by percentages. Changes between keyframes are animated by the browser. After introducing CSS animations, Rachel explains some of the differences between animations and transitions.

Get Unlimited Access Now

Rachel Nabors: We're on our way to CSS animations. These are a little bit more abusable than transitions, part of that is because CSS animations aren't supported because CSS animations don't describe a change from one state to another. Transition. How should we change this property when it is changed by some CSS animation?

I told you to change that property. Now do it. The property isn't going to change if the animations aren't readable. So if you make an interface that doesn't use transitions, you're just using animations on everything. And animations aren't supported, then things don't change the way you think they would.

They're a little bit more tricky. I hope that I can share with you a little bit more about how they are tricky. All right, so what does animation look like? They share a lot, a lot of similarities with transitions. For instance, you might notice, I'm going to actually point here, going to use a pointing with my finger

Rachel Nabors: So you'll notice this top line here, animated thing, has an animation where a transition property would be where you put a CSS property, you actually put the name of a @keyframes block in this case black to white. You give it a duration. You can give it an easing.

But then you notice there's also this number on the end here. This one. What does that mean? Let's talk a little bit about the differences between transitions and animations, and that gets down to this key frame block, and this number, which is actually the number of times you want that animation to run.

So here's how that looks in shorthand. I've got the name, we've got the duration, the timing function which is optional, the delay it has a delay just like transitions, also optional, just like transitions, and iteration count which is optional because it defaults to, get this, one, just one.

So if you have an animation and you don't tell it how many times you want it to run, it will just run once. In this regard you could use some light transitions, but you shouldn't. So let's take a look at each of those. The animation name is the name of the key frame block that you want to use.

Well talk a little bit about key frame blocks and how we set them up later. Let's just focus on the animation syntax for now. The animation's duration, or how long the animation's going to take to go from the beginning of that key frame block all the way to the end, how long it's going to take to animate all of those values.

And animation iteration count, or the number of times you want to go from that 0% to 100%, you can set it to infinite which means it will never stop, it will keep running forever, it will keep iterating over and over. Or you could set it to say three, have the animation repeat three times, it defaults to one.

The animation will run one runs and then be done, and it will evaporate like it was never there before. There's also animation-timing-function which is like transition timing function. It's so long. It's so long. Animation delay, which is just like transition delay. All right, I told you were going to talk about the key frames block.

This is the real magic of CSS animations. Here you can see, we have key frames. Key frames blocks named black to white. Now it starts with a black background and white color for all of its text and then by the time it's done running, the background is going to be white and the text is going to be black.

So it's essentially it's essentially transposing those two values. Now another way of writing it, instead of doing 0%, 100%, you could use from and to, the keywords. This might help you when you're getting started with CSS animations. Instead of using 0%, 100%, saying you want to take it from these values to these values can make a little bit more sense syntactically for you.

However, there are some benefits to using the percentages. For instance you can say you want things to happen like half way through. We got 0%, 50% and 100% all up in this joint. And check it out, you can even consolidate shared values onto the same line. 0% and 100% here have the same color value, so we can just put a comma between them and let them share a line.

They're very happy bunkmates. So if you want to have multiple animations, just like with transitions, you can write them out in longhand by separating statements with commas. So here we've got black to white, it takes one second long. It's using, it's linear, it runs once, we didn't actually have to put that one there.

I did it, black to red takes two seconds, it's going to use ease out. It's going to run infinitely and, just like with transitions, that second timing value, that two seconds, that's a delay. So it takes two seconds before it runs. Now as you can see, we could write all of this out with the longhand via animation-property.

I mean animation-name black-to-white, black-to-red. We could do that but at this point that would get pretty gnarly pretty fast. So I'm not even going to cover writing it out with the longhand. I mean with the longhand, we're going to jump right into using shorthand on this one.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now