The full video and many others like it are all available as part of our Frontend Masters subscription.

Rachel Nabors

Rachel Nabors is a CSS animations fanatic and award-winning cartoonist. A regular conference speaker, she ignites new technology with her experience in visual storytelling.

Rachel Nabors

Web Animation

Rachel spends a few minutes demonstrating how to transition the color of the ball in the previous exercise from one color to another. She also talks briefly about optimizing the animation by adjusting when multiple animations are running.

Get Unlimited Access Now

Rachel Nabors: So I want you to try to transition the ball's color, not using all. Okay, so as I was walking around the room. I noticed that somebody on a computer very similar to my own, was having a little bit of shaky movement in their ball as it was rolling across the screen and changing color.

And I was fascinated by this, it's like this is a simple transition, why is it so janky? And I looked closely and he was using transition all. And then when he showed me the same animation with two different statements for the transition, the jank just disappeared completely, and the ball moved smoothly across the page.

Let me see if I can try to recreate that for you. So first off we are going to. Rachel, you didn't, you didn't even. Hang an on a moment. I'm going to leave this page, here we go. I'll just work with this one, that link, no good, this one is much better.

So what I'm going to do here is, I've got the background changing, and I've got set to transition all, I'm going to move it. Let we change this view. To this one, poo poo poo poop. So we get to see it move across a much larger field. Let's see if we can slow it down a lot by making it move a long distance in a very short amount of time, and transition all on like 0.25 seconds.

That's a little too fast. Let's see three and. Yeah, you might be able to see this on the recording. But there are points where you can very clearly see that there is, that they're balls that are overlapping. So, how might we get rid of that? We are going to do a transition on background.

Rachel Nabors: Now we've just got that changing. And we're also going to do transform. Almost put semi-colons in. Now we've got them moving at the same rate, or we should. Up, you're right. Syntax always bites you. See, I told you it would be fun to watch me. I wasn't able to perfectly recreate it.

There must be something about, well might be because he was using Chrome Canary. I have no idea why that would be a difference, but I'm using Chrome and sometimes which browser you're using does make a difference. So we can change the different delays here. Say we want, for instance, the animation to run on the ball.

After it has, we want the color to change after it has come to a rest. Now we're able to manipulate these independently, and also they will have a. And also we should see slightly better performance for it.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now