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.
(dramatic music) - 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 CSS. 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're tricky. Alright, so what does animation look like. They share a lot, a lot of similarities with transitions. For instance, you might notice, I'm gonna actually like point here. I'm gonna use the pointing with my finger. 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 know, 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 keyframe 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. We'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'll just run once. In this regard you could use unlike transitions, but you shouldn't. So let's take a look at each of those. The animation name is the name of the keyframe block that you want to use. We'll talk a little bit about keyframe 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 keyframe 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 it 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 once and then be done and it will evaporate like it was never there before.
There's also animation dash timing dash function which is like transition timing function. It's so long, it's so long. Animation delay, which is just like transition delay. Alright, I told you we were going to talk about the keyframes block. This is the real magic of CSS animations. Here you can see we have a keyframes block named black to white. Now it starts with a black background and white color for all of it's text and then by the time it's done running the background's going to be white and the text is going to be black.
So 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 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 bunk mates. So if you want to have multiple animations just like with transitions you can write them out in long hand by separating statements with commas. So we here we've got black to white. It takes one second wrong, it's easing is 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 gonna 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 long hand via animation dash property, I mean, animations dash name, black to white comma 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 long hand, we're gonna jump write into using short hand on this one.
Note: This course was created by Frontend Masters. It was originally released on 09/15/2016. We're pleased to host this training in our library.
- CSS transitions and animations
- Using animation in product design
- Creating a sprite animation with CSS
- Stateful transitions and supplemental animations
- Using developer tools to manipulate animations
- Jump cuts and in-betweening
- Static vs. dynamic animations
- Designing performant animations