This course has been updated! We now recommend you take the CSS Animations and Transitions course.

Check out a free preview of the full Motion Design with CSS course:
The "Exercise 1: Rolling a Ball" Lesson is part of the full, Motion Design with CSS course featured in this preview video. Here's what you'd learn in this lesson:

In this first exercise, Rachel demonstrates how to create a rolling ball with multiple CSS transitions.

Get Unlimited Access Now

Transcript from the "Exercise 1: Rolling a Ball" Lesson

>> [MUSIC]

>> Rachel Nabors: Now it's time for our very first exercise. I showed you how the paw is moving. Now it's time to see if you can get the ball to move. It's time to show the solutions key. I promised you I would do these alongside you. The fun part is sometimes you get to watch me struggle.

[00:00:29] Nobody writes code perfectly. Anybody who does has rehearsed it and probably used some editing magic. I know, I record my own screen casts, I do a lot of takes. A lot of takes to make it look magical and fast. All right, so we want the ball to move.

[00:00:47] We know that after the page loads, the body gets a class of playing.
>> Rachel Nabors: And that lets us scope transitions. Here you can see that the paw has a transition set to its transform. Basically what the transition is saying, as a recap, is anytime the transform property changes on paw, it's gonna transition.

[00:01:13] And it's gonna take 0.25 seconds. And then of course, what do we do as soon as the body has a class of playing? We change the transform, we move the paw in another direction. It could be pretty much any transform. It could be a translate, it could be a scale.

[00:01:29] But specifically, we're using translateX as it is a horizontal transform to move it over by 30 pixels. So now we want to do the same with the ball. Now here's, I have put so much helper text in here for you. But here's a special secret from somebody who's worked with a lot of transitions.

[00:01:49] Sometimes it helps to start with how you want the thing to look at the end of it's transition, rather than trying to figure out what you want that transition to do. So here we want the ball to move to the right. We want it to move toward the big code block because it's being hit by the paw.

[00:02:07] So where would we like it to be? Let's give it a transform of translateX, moving it across the x axis of 300 pixels, see how that looks. Well, as you can see, it's jumped all the way over there. I'm gonna make it a little bit closer, maybe like 280.

[00:02:26] This might just bump it right up against the edge of the screen. That would look cool, right. 250, let's try that.
>> Rachel Nabors: I just can't let it go.
>> Students: [LAUGH]
>> Rachel Nabors: There we go, yeah, 235. It's gonna be perfect. Okay, so now we've got the ball exactly where we want it.

[00:02:49] How do we get it there? Well, we've changed it's translate, we've changed its transform. So we want to set a transition with the property we wanna transition. Well, here, I'll write it out long form, transition-property is transform. And we want it to take transition-duration maybe like one second

>> Rachel Nabors: All right! Aw, dang, it started at the same time that the paw was moving. That didn't look good, look at that.
>> Rachel Nabors: That's some serious hijinx there. Obviously, we need a transition-delay on this. And we want it to run after the paw started. The paw takes 0.25 seconds, so it'll be done 0.25 seconds later.

[00:03:41] So we delay the ball from moving until after the paw has run. If we wanted to write this super, super, super concisely, we could just do transition. Remember the first one is gonna be its duration, and the second one, by default, is gonna be it's delay. And we could write it like that.

>> Rachel Nabors: There we go, nice.
>> Rachel Nabors: So that is how you do a transition. Don't close your transition exercises, we get to play with those.