This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Animation with Emotion" Lesson
[00:00:00]
>> Brian Holt: One more thing to show you with styles component or with Emotion. There are several other cool things that Emotion can do, but I wanna show you how to do keyframe animations cuz you just have to know how to do it. So from react-emotion I'm going to import another thing called keyFrame, okay?
[00:00:21] This is going to allow us to do animations using Emotion. So let's say I have this icon up here, and for reasons unknown to me, they wanna make it rotate all the time. So, what I'm gonna do here, is I'm gonna say, const Spin = keyFrames,
>> Brian Holt: Okay?
[00:00:49] And this is another kind of tagged template literal. And I'm just gonna say, from,
>> Brian Holt: transform: rotate (0deg). So start at zero degrees and go to transform: rotate (360deg), right? So just go from zero degrees and rotate all the way around to 360 degrees.
>> Brian Holt: Okay, underneath that I'm gonna make a spyglass.
[00:01:23] So const SpyGlass = styled("span"). And here I'm gonna say, display: inLine-block, cuz if it's in line it won't work. And then, animation: 1s ${Spin}, right? So, what this is going to return, is it's going to return to the appropriate key to refer to that spin animation that we created.
[00:01:56] And then we have to say linear and infinite. So always spin and don't do any sort of easing, okay? Let's get rid of that stupid outline here, this one. And then I wanna replace spin here with SpyGlass.
>> Brian Holt: It's gonna start yelling at you because it feels like this should be a spin, it is, right?
[00:02:30] It's still a spin, it can't see through the styles component to see that. So you would have to disable that, but for now we won't worry about the eslint there. But now if you go look at this, now you have a spinning eye glass, or whatever you wanna call that.
[00:02:45] I guess marketing came to you and said we really want people to click on this search thing. And that's how you do it.
>> Brian Holt: You should hire me to design your website, by the way. I have great ideas.
>> Brian Holt: But that's pretty cool, right? And it feels pretty familiar if you know how to write key frames in CSS.
[00:03:07] This isn't too different than writing normal key frames.