CSS Animations

[00:00:00]
>> So I wanted to give you just a little introduction to animations, cuz they're kind of fun. You can achieve really amazing things with just CSS animation, so I just picked a random one off of CodePen. But there's so much good stuff on CodePen. This person did the entire solar system with very little JavaScript and mostly CSS.

[00:00:25]
All these rotating planets and stuff like that, all done with CSS. I'm just gonna show you how to make our little spinny-boi sick [LAUGH]. So the thing called key frames, you need to find a reusable animation. So I say here that the spinny-boi does spin, which refers to this named CSS animation I created up here.

[00:00:48]
This could be like lol. As long as I call it lol there, just works, right? How long it takes to go. So if I do 1.5 seconds, notice it spins very slowly, or 10, really slow, or 0.5, pretty fast, or 0.05, to the point that my browser can't render that fast, right?

[00:01:13]
Infinite, if I just do 1, it'll stop. Or if I do infinite, it will go forever. And then we'll get into easing, but you could do ease where has an easing function, so it stops and then goes, and that's it. That's as far as using an animation. From here, I just find the animation of to, which I'm telling you transform it to something like this.

[00:01:39]
Notice I don't have a from. That's because the form is implicit of where it starts. So this would be exactly the same as from transform: rotate(0deg). Let's do this linear again. So this doesn't make any sense because rotate(0deg) is doing nothing, right? It's the same thing, which just means that I can just leave it off, cuz it's implicitly already that, right?

[00:02:13]
And that's it, that's how you do CSS animations. You define the keyframes. You could also write this as 0% and 100%. And that allows us to do intermediary steps. So if I wanted to rotate really fast to 270 degrees, or let's say 25 degrees, and I say transform: rotate(270deg).

[00:02:48]
Notice it goes really fast to 270, and then it slows down for the rest of it, right? So you can define all the individual steps however you wanna define that math, which is kind of fun. That's it, you can just mess around with that, and it's fun to play with.

[00:03:09]
Those are called key frames, they're reusable animations. And animation is height. So you define a keyframe and the way you use a keyframe is with the animation. Right, that's what that CSS property is for. Okay, so easing, I just wanted to show you really quick what easing looks like.

[00:03:30]
These are all the same animation with just different easing. So notice linear you have the dancer just going straight back and forth with no rubber banding effect. So you can see here with ease, the dancer slows down and speeds up, and then ease-in and ease-out. It looks like ease, but a little bit more smooth.

[00:03:54]
Then you can see ease-in, she looks like she's bouncing off the right side, right? Because it doesn't slow down on the right side, but it will slow down on the left side, which is the easing in. Easing out's the opposite, that it looks like she's bouncing off the left side.

[00:04:11]
And then you got the kinda the spastic one down at the bottom. We can actually define your own function, which I'm not gonna really get into how you define the function, but it allows you to affect the animation curve of how fast it achieves the animation. So the animation looks like this.

[00:04:30]
All it does is just translates, which it translate's the same way of saying move. So if I said translate 100 pixels, as you might imagine, she moves further, right? Right, so now she's moving further away. And then it's all this does, is the dancer just moves. And then you remember I used the animation property?

[00:04:56]
Here I just broke it out into multiple different lines, animation-name, animation-duration, iteration-count and direction. So these four lines would be the same as saying this, which is the shorthand for multiple different properties. And then here, the only thing I'm changing is the timing function. Linear ease, ease-in, ease-out, or this cubic-bezier function, which, I left a link on there.

[00:05:23]
I don't actually remember what all these numbers mean. It's not even I don't remember, I don't think I ever really knew, to be honest with you. But it allows you to affect the curve of how she moves. So read more about it here on the MDN. It goes into depth, including what all the numbers of that cubic-bezier function do.

[00:05:44]
So you can use animation for a lot of things. I showed you position, I showed you rotation, but I wanted to show you color, for example, right? This is just going between various different colors just using CSS animation. And all I've done here is I've just described at every different position what I wanted the color to be.

[00:06:08]
And the reason why I chose all of these different colors is just that's what a rainbow looks like, right? So just going through all the various different colors of the rainbow. And so you can make it go through all of it really fast, really fast, really, really fast.

[00:06:25]
I probably don't wanna do that. We'll stick with slower and same thing. Many things can be animated with CSS, not everything, but lots of things. And all you have to do is define all the various different steps here using keyframes. And there's other ways of doing CSS animations.

[00:06:50]
I just wanted to show you a few, just to kinda get your attention on it. Again, there's lots of great content on Frontend Masters for animations, lots.