CSS Animations

[00:00:00]
>> Brian Holt: Let's talk about rotations for just a second. We didn't talk about animations or keyframes or anything like that, did we? Okay, so it's not too bad. So let's look at spin here for a second, which is the second little mole guy is doing right here.
>> Brian Holt: So this is on the dog exercises page.

[00:00:19]
You're gonna define some sort of animation here. So, here, I'm creating one called spin. And what you're saying is, I want you to go from this state,
>> Brian Holt: From,
>> Brian Holt: Transform z to 0 degrees, okay?
>> Brian Holt: So ignore everything else here, we're just looking at this keyframe spin for a second.

[00:00:53]
So these are how you define reusable animations in CSS. So I'm saying, go from a 0 degree rotation to a 360 degree rotation, which CSS knows, okay, that means I'm gonna go from 0, all the way around. If I change this to be 180, wow, or you can set it to 1800, and he's put on the spin cycle.

[00:01:17]
>> Speaker 2: [LAUGH]
>> Brian Holt: But here, it would go to the top and then it would go back all the way around, right? That's why we do 360, so it goes all the way around.
>> Brian Holt: So from and to, it basically says, start here, end here, and figure out what to do in the middle, right?

[00:01:40]
You can actually be more specific than that.
>> Brian Holt: You can be super specific, so 90%,
>> Brian Holt: Or let's do 0%, 100%. And then I can say something in here like, 90%, transform,
>> Brian Holt: 350, so it's gonna make the first part of this super fast and the last part super slow.

[00:02:16]
>> Brian Holt: I gotta change this back to 360.
>> Brian Holt: Right, so it kind of gives it that little jerk at the end.
>> Brian Holt: So suffice to say, you don't really have to, if you're just gonna make it spin, all you have to do is just to define the 100%.

[00:02:36]
Or you can also say, 2, which is shorthand for 100%. And this just makes it spin all the way around. Okay, make sense? So that's defining the spin part of it. Down here, you actually have to use it here. To spin, you say, animation, which is the name of the property.

[00:02:56]
Say, I want you to spin, which refers to this, right? I want you to take 3 seconds to do it. There's this thing called ease in and out. Notice that when it spins, it goes and it starts slowly, and then it goes faster and then it ends slowly, that's called easing.

[00:03:13]
So if I just said, linear, it means it's gonna spin in equal parts and it's not gonna go faster in any particular part, right? Now it's just gonna keep spinning at the same speed the entire time, which is how I was doing the CSS spinner before with that.

[00:03:31]
>> Brian Holt: Make sense? If you're asking why we're doing rotate z right here, so we're thinking about things in 3D space, right? You have the x-axis, the y-axis and the z-axis, right? So we're spinning things around the z-axis, which is between you and me and the user. So I'm spinning like this, right, which is why it looks like it's spinning like that.

[00:03:53]
So now if I change this to be rotateY, it's gonna spin like that, right, like a coin.
>> Brian Holt: Same thing if I do rotateX,
>> Brian Holt: It's gonna rotate like that.
>> Brian Holt: So, in this case, we want z, right?
>> Brian Holt: And if I want it to go faster, so the 3 seconds, I can put .5 or .4, now it is going pretty fast, right?

[00:04:30]
And you can get it going pretty damn fast, like 0.04.
>> Brian Holt: Faster than the projector can display it. So this is how you would do, like if I wanted to do an emoji there, right? I would just put a spin or a div there and just have it rotate that particular div.

[00:04:50]
>> Speaker 2: So then do you use it as a background image when you're displaying?
>> Brian Holt: You could, you could do it that way if you wanted to.
>> Brian Holt: So,
>> Brian Holt: In fact, I could totally come down here and say, <h1 class="spin">.
>> Brian Holt: And I could put hi, right? Now look at-

[00:05:19]
>> Speaker 2: [LAUGH]
>> Brian Holt: Now, why is it going all the way around like that? Well, an h1, by default is gonna try and take the entire line, right? So let's see what happens here if I say, text-align-center, then it's gonna at least put it into the center of that.

[00:05:41]
>> Brian Holt: Make sense? So it's kind of fun. Let's maybe slow that down a bit, I'm probably making someone sick. But there you go.
>> Brian Holt: But even still, if I right-click and Inspect Element on this,
>> Brian Holt: Look, it's spinning the entire div, right? We probably wanna talk about this one as well, right, this psychedelic one.

[00:06:05]
This is kind of fun. So there's a thing in CSS called filters, which there's also blur, right? Where you can make CSS blur things, and in the background. And there's a bunch of other ones. You can make them sepia and black and white. Filter allows you to do a bunch of that stuff.

[00:06:22]
The one I'm using here is hue-rotate, which if you're familiar with colors and things like that, there's a thing called HSL. Hue, saturation, and lightness, or brightness, depending on who you ask. In CSS, we call it HSL. And what we're doing is, is we're rotating the color around the color wheel, right?

[00:06:41]
So if you think about a big color wheel, in fact, it's actually built into this. If I get my CSS here. Let's grab another one here that I have open.
>> Brian Holt: CSS, okay, so I think, yeah. So what this is doing is it's rotating basically this around like this.

[00:07:01]
And that's rotating the hue. So this progression of color here is the hue. Whereas this right here, whether or not how far I'm this way, that's gonna be how light it is. And then saturated is how vibrant the color is. None of that stuff is actually really important in this particular case.

[00:07:23]
What's important here is that I'm just rotating around the color wheel, which is how we get this crazy psychedelic effect.
>> Brian Holt: Point being here is, with keyframes, you can animate more than just rotating or things like that, you can actually rotate positions. The animations for the final game, for the the fox, are all done with keyframes as well.

[00:07:43]
So another thing that you can do that's kinda fun here, if I do spin, and then I also do alternative here.
>> Brian Holt: If I look here, it's gonna spin one way and then spin the other way.
>> Brian Holt: Which is pretty fun too.
>> Speaker 3: Can you have it rotate on multiple axes without overwriting it?

[00:08:04]
Cuz if you just put it below, it just changes.
>> Brian Holt: This should work.
>> Speaker 3: Maybe it's not for me. I don't have the image loading, so it's just.
>> Brian Holt: Hold on.
>> Speaker 3: Solid color.
>> Brian Holt: Actually, you know what? It has to be this.
>> Speaker 3: Okay.
>> Brian Holt: There's a way to do it, I can't remember what it is.

[00:08:23]
>> Speaker 3: Okay.
>> Brian Holt: There it is.
>> Speaker 3: Cool.
>> Brian Holt: Wow, I mean, let's go with full gyroscopic motions.
>> Speaker 3: [LAUGH]
>> Brian Holt: So in case you're wondering, that's what it looks like.
>> Speaker 3: Just in case you wanna make people sick.
>> Brian Holt: If you wanna fix this, what you're doing right now, just remove the periods here.

[00:08:50]
So this has period, period right now, just put period/. I thought I would fix that, but apparently I haven't.
>> Brian Holt: Cool, so these are fun, right? Definitely stuff you can be doing today with your CSS. And so this is what I want you to do, is I want you to make a dog or some sort of emoji spinner when you're loading.