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

The easiest way to transition multiple properties is to use “all” as the property to be transitioned. This can have unintended side effects since every property change will be transitioned and each transition will have the same duration. Instead, Rachel demonstrates how to use the transition property to create a comma-delimitated list of transitions - each with their own duration and delay.

Get Unlimited Access Now

Rachel Nabors: We've transitioned one property, but what if we want to transition even more. Let's take a look, I'm going to transition the ball's color. So let's say, we want to change the ball's color too.
Rachel Nabors: We want to change its background color, to red. I'm a big fan of the color red.

Rachel Nabors: So how could we get it there? Well, one thing we could do, which our lovely friend online asked about. Was we could do something like transition all.
Rachel Nabors: That worked. That transitions, all the properties. So in any property changes, it's going to get transitioned. Now the downside is, this means that any property that changes, will get transitioned.

So let's say I wanted to also modify something else about it, like give it a border of one pixel, and solid, and black. But I didn't intend for that to animate. But it's going to be transitioned, it's going to animate anyway. So as you can see when you use transition all, sometimes it can result in interesting animations.

Everything is going to be animated, any change on this property will be animated.
Rachel Nabors: Element. There's another downside. It's actually not very performant. Transition all basically, is a way of saying to the browser, hey browser. Watch this element because at any given time, anything might change. So the browser is like okay just, whatever you do man like don't want any trouble.

I'll just, put all of my resources into watching this one element, to see if anything's going to change on it. It doesn't let the browser optimize, for things that might change and that can result in it. Devoting a little bit too many resources, to being prepared for that.

And like I said, as far as maintenance down the line, say you've got a huge style sheet. And a designer comes in after you, and they're like and on this other page. It should have a new background color. Well now when people go to that other page, the background color is fading in what you didn't intend for that to happen.

The designers stumped and you get a bug ticket, transition all not a cool friend. So what we might do, which could be a lot better is a lot better. Why am I speaking in wishy washy words, it is much better to separate what we do is we have.

Multiple properties listed with the same transition. This is the long form, where we separate extra values with commas. There is a downside, which means that you have to define every value, even defaults, so they all line up. So here you notice, that the transition property. It's transitioning both color and transform.

The transition durations for each of those, the color takes two seconds to transform takes 300 milliseconds. And we want the transform to run after the color. So we wait one second, while not after but like midway through the color. So we wait one second and then, we change the transform on it.

However, we still have to define the default, because color changes immediately we have to put a zero in there. Can only imagine how frustrating it gets, when you have four or five properties that you're transitioning. And you have a whole string of zeros, to get to a one second delay.

It gets a bit frustrating, it doesn't have to be this way. Because the shorthand, looks so much better. You separate statements with commas, it provides a much nicer grouping here. Is that same one, the color takes two seconds to transform, takes 300 milliseconds and has a delay of one second.

And all of the values are paired up together, in nice little statements separated with commas.

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