Check out a free preview of the full Intermediate React, v2 course:
The "Animations" Lesson is part of the full, Intermediate React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates how easy it is to add a keyframe into a JavaScript file by making a poodle spin on the page.

Get Unlimited Access Now

Transcript from the "Animations" Lesson

[00:00:00]
>> Brian Holt: So what happens if I want to do an animation, right? What happens if I want to spin the poodle? Who doesn't want to spin the poodle, right? So what we're gonna do here is we're going to import.
>> Brian Holt: We can get rid of this onclick handle, it's driving me crazy, okay.

[00:00:21]
>> Brian Holt: So here from emotion/core, we're also going to import keyframes and then we're gonna say, const spin = keyframes. We're gonna do another tagged template literal, keyframes like that.
>> Brian Holt: And we're just gonna do a pretty simple transformation here, which we're gonna say to { transform: rotate (360 deg):.

[00:00:57] So again, this is not a animation class. Sarah teaches really good animation classes.
>> Brian Holt: But if you say to and you omit from, and it just assumes that you're going from the current state to 360 degrees. Which would be all way around, right, which is gonna be a spin.

[00:01:18]
>> Brian Holt: So now what I'm gonna do is I'm gonna go down to the poodle.
>> Brian Holt: And I'm going to say,
>> Brian Holt: Animation, I think you're gonna have to say, display:, rather. Inline-block;
>> Brian Holt: And animation:
>> Brian Holt: 1s ${spin} linear infinite;
>> Brian Holt: So spin will actually contain the name of the animation that it generates for you, right?

[00:02:02] And so now, we have a very confused poodle.
>> Brian Holt: Check this out, so you could do on hover. We can move this into this and say reverse.
>> Brian Holt: It's wildly entertaining. This is good brand work cuz it brings people's eyes to the brand, right? Should work in marketing, this is now marketing masters with Brian Holt.

[00:02:34] [LAUGH]
>> Speaker 2: Something about this reminds me of Angelfire.
>> Brian Holt: [LAUGH] Everything about it should remind you of Angelfire. The color palette, the just ridiculous borders, the spinning poodle. This was my Geocities site, right?
>> Speaker 2: [LAUGH]
>> Brian Holt: I think the last time I was here, I made it so every time you clicked on the poodle, it spun faster and faster.

[00:03:02] Until eventually it was a blur and it looked like it was spinning backwards. [LAUGH] But you know exactly how to do that now, right? All you have to do is the same thing we do with padding. You would just replace this 1s with half s, quarter s, eighth s, right?

[00:03:14] And eventually you get down to like, 0.1S, right?
>> Speaker 2: [LAUGH]
>> Brian Holt: And you end up with something like that, right?
>> Brian Holt: So this is why I'm really excited about Emotion, right? You're able to do a lot of really cool stuff that was not impossible to do before, but much more difficult.

[00:03:32] Now, because all of your stuff is melded together, it's really easy to manipulate this kind of stuff. So, I'm a big fan. I'm a big fan in the sense of they're really pushing the world of CSS forward and I have a great appreciation for that. So, we're actually gonna get something called Houdini really quick where you're actually gonna be able to control how the browser paints CSS properties.

[00:03:54] It's a spec that they've been working on for a while now, but you can actually mess around with a special version of Firefox that has Houdini built into it. So eventually, I think this is going to start merging more and more with the browser. So I'm pretty excited about it.

[00:04:08] So if you want to check this out, this is in the branch Emotion. Does not come with spinning poodle, unfortunately. Well, it doesn't come with fast spinning poodle. It comes with normal spinning poodle.