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

In this first exercise, Rachel demonstrates how to create a rolling ball with multiple CSS transitions.
- https://cdpn.io/fGFDj

Get Unlimited Access Now

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.

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.

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 going to transition.

And it's going to 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.

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.

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.

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 going to make it a little bit closer, maybe like 280.

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.
Rachel Nabors: There we go, yeah, 235. It's going to be perfect. Okay, so now we've got the ball exactly where we want it.

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 want to 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.

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 going to be its duration, and the second one, by default, is going to 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.

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