This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "CSS Animations Summary" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Rachel Nabors: What's our coverage like with CSS animations? Well, it's not as good as the coverage with CSS transitions. Let me get into that. Of course it's not available on IE 9 and lower and Opera Mini. But what you didn't know is that Safari and Android, both of them still use webkit, the webkit prefix.
[00:00:29] It looks like they're coming down from that, but still, if you actually go over to caniuse.com, hang on, we can do this. Here's my mouse. If you actually go over here and you say, I want to see the relative usage of these things, here's where you can get the idea that, quite a few of some of these browsers that are still popular and still being used by a quite a lot of people require that -webkit prefix.
[00:00:52] [NOISE] And look at this. Look at this Opera Mini coverage. Look at that. So you gotta keep this in mind when you're animating stuff. I always encourage people to look at their actual user statistics. If you're working on a site, go find the people in marketing and be like, could I have a look at our relative usage statistics?
[00:01:12] And go see if you have lots of Opera Mini user or lots of Internet Explorer 9 or 8 users, and be sure to build your animations bulletproofly on their behalf.
>> Rachel Nabors: So why do CSS Animations rock? Well, they got looping. You can't loop things with transitions. If you wanna loop, you gotta use CSS animations.
[00:01:38] They're self starting, they don't require a trigger like transition. Transitional only kicks in if you're taking a property and you're changing it. With CSS Animation, you tell it what properties you want to change, you dictate. They repeat, we talked about looping, but you can set how many times it does that as well.
[00:01:59] Alternating, you can alternate, make it go from beginning to end and backwards, that kind of swinging effect we saw with the tail. And lastly, Grouping, each animation can change a number of properties. So if you want to edit a lot of things happening at the same time, sometimes having a key frame block is the better idea.
[00:02:18] I also want to show you one tiny trick that I didn't show you perhaps earlier. Let's see if I can do this. So remember when we had Tuna walking earlier? He's doing that catwalk strut there. Well, check this out. You don't actually need the 0% on this one.
[00:02:39] Because the default values, the 00, they're default so both just needed 100%. You don't always need to use 0%. Check it out. Anyone who tells you that CSS animations are bulky and take up a lot of space has never been introduced to the steps function or has learned these tricks.
[00:02:57] [LAUGH] Anyway, that said, it is now time for our delectable lunch break. Boom, boom, boom, boom. But first, before we all depart, are there any questions?
>> Speaker 2: Apples to apples, is there a performance difference between keyframes and transition?
>> Rachel Nabors: Is there a performance difference between keyframes and transition?
[00:03:22] So the difference between animations and transitions, is there a performance difference? Not that I'm aware of. If there is one, it is news to me, but I never like to say never when it comes to these things. I'm just gonna say, as far as I'm concerned, they perform the same.
[00:03:37] But good question, good idea. You can never be sure.
>> Speaker 3: With behavior like bouncing, I noticed that you can mimic at least one kind of bounce with the cubic herbs on easing.net but that there is no CSS functionality at this time for multiple bouncing. And you have to pretty much manually code that with keyframe's animations.
[00:04:05] So, how do you like make decisions about whether to use transitions or keyframe animation for something like an object bot's behavior?
>> Rachel Nabors: Very good question. So those of you who are intense who remembered the Flash days. Remember that? You could do bounces in Flash. That is to say that ball, when we moved across there are cubic Béziers to give it a little bounce at the beginning, a little bounce at the end.
[00:04:29] But there's no cubic base Bézier curve for dribbling the ball for instance. That you could, technically, make a bunch of CSS keyframes and run an animation on the ball and you describe, I want it to bounce like this. It takes a lot of work. Wouldn't it be nice if there was an advance cubic Bézier syntax we could use to describe a bounce and pass it that value instead of just having that single bounce value?
[00:04:54] That's something that I'm actually working with the W3C right now to try to come up with. We've done our best to provide a need for it because this does come up a lot. It was a part of Flash. I think there is a design need for it. But when the cubic Bézier syntax was created, it wasn't created with bounces in mind.
[00:05:14] So maybe in the future, that will be a possibility. But for now, if you want to do bounces, you will have to rely on CSS Animations and keyframes to do it. And it will be a little manual and I might be able to show you a couple of tricks to make it a little less painful to do.
[00:05:32] Later on, we will talk about how to use CSS Animation timing functions inside keyframe blocks, which you can do. It is one of the few CSS Animation properties that you can put inside a keyframe block to describe how each one of those percentages should change over time. I was surprised when I read the spec and found it out too.
[00:05:56] It'll be a lot of fun when we get there.