This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Transitioning Multiple Properties" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Rachel Nabors: We've transitioned one property, but what if we wanna transition even more. Let's take a look, I'm gonna transition the ball's color. So let's say, we wanna change the ball's color too.
>> Rachel Nabors: We wanna change its background color, to red. I'm a big fan of the color red.
[00:00:32]
>> 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.
[00:00:57] 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.
[00:01:29] 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 cuz at any given time, anything might change. So the browser is like okay just, whatever you do man like don't want any trouble.
[00:01:59] 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.
[00:02:13] 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.
[00:02:30] 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.
[00:02:49] 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.
[00:03:11] 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.
[00:03:30] 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.
[00:03:48] 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.
[00:04:08] And all of the values are paired up together, in nice little statements separated with commas.