This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Demonstration: Changing the Ball’s Color" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> 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.
[00:00:25] 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.
[00:00:46] 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 gonna leave this page, here we go. I'll just work with this one, that link, no good, this one is much better.
[00:01:07] So what I'm gonna do here is, I've got the background changing, and I've got set to transition all, I'm gonna 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.
[00:01:38] 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.
[00:02:11]
>> 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.
[00:02:37] 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.
[00:03:00] 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, [COUGH]. And also we should see slightly better performance for it.