Check out a free preview of the full CSS In-Depth, v2 course:
The "Animatable Properties" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Not all style properties can be animated. In general, properties that are animatable have a midpoint: if you can determine what the midpoint is between to property values, then the change between those two values can be transitioned or animated.

Get Unlimited Access Now

Transcript from the "Animatable Properties" Lesson

[00:00:02]
>> Estelle Weyl: So what properties, with animated some properties, with transition but really it's an animation of those properties, which properties are animatable? Anything which has a midpoint that you could define, is transitionable or animatable. So when you go from opacity: 1 to opacity: 0, you can figure out that the midpoint is opacity 0.5.

[00:00:24] But when you go from display block to display none, what is the midpoint? There is none. So display is not transitionable, or animatable, but opacity is.
>> Estelle Weyl: You can go from font size 100 to font size 120 and you know that the midpoint is font size 110. But you can't go from code height: auto to height: 1000 pixels, cuz what is auto?

[00:00:52] You actually can, it will allow you to, but you don't know what effect it's going to have. The best thing to do is to actually use min-height. So you say min-height: 0, which is auto, right? It's gonna view whatever height it needs to be. Min height 1000 that's going to go to a thousand and then you know that the midpoint is 500.

[00:01:13] So it's a rule of thumb. It's not exact, but, generally, if you can think in your head where the midpoint would be, then you can assume that it's animateable. This is a list of transitionable properties. It's probably grown, because there are more properties now. But all of these, you can kinda come up with a midpoint, except for visibility.

[00:01:37] Visibility is transitionable, at the 100% mark it goes from hidden to visible, or visible to hidden. Depending which direction you're going in, so it is something you can put in a transition property. It won't break it, but it's slightly different. Okay, so a few tips and tricks. Okay, so here I wanna talk a little bit about the transition placement.

[00:02:05] So I'm saying transition 3 seconds, and it's going to steps. And we haven't covered steps, but that's a timing function.
>> Estelle Weyl: So when it goes to invalid, when it's invalid, it will transition but it won't transition when you go from valid to focus. So I'm gonna click in here and you saw, it didn't transition because it's going from green to yellow, but when I put in a three, no, yes.

[00:02:38] If I put in a three, it's not gonna be valid and it's gonna transition to red.
>> Estelle Weyl: Apparently it did not.
>> Speaker 2: Right. [INAUDIBLE]
>> Estelle Weyl: Yeah thank you. So it did it in three steps so it's a little bit weird let's just do linear.
>> Estelle Weyl: Okay and now I'm gonna go up and it's gonna become valid.

[00:03:10] It went to focus first cuz focus is last. Let's just put this X here.
>> Estelle Weyl: So I'm gonna go to three.
>> Estelle Weyl: And you see as linearly moving from green to red. And then four
>> Estelle Weyl: Seven. It's going back to red. And then if I put focus right there when it goes from green to yellow it will not animate, but only when it goes from red to either yellow or red to green and I need to put this back on the bottom because when I go focus it should turn yellow.

[00:04:03] And there we go. So the source order actually mattered. Because otherwise, they all have the exact same specificity, right? They're all at 011.
>> Estelle Weyl: So for it actually to change colors
>> Estelle Weyl: It had to be able to get to that color.
>> Estelle Weyl: So transition features, there's a single iteration.

[00:04:30] With animations, you can do multiple iterations. The reverse when you go from, so here we went from red to yellow and yellow to red. So one direction was from red to yellow and then reverse, yellow to red, it's the exact same transition unless you declare it a transition in both places.

[00:04:51] So I could do, let's do steps and then two seconds transitions two seconds and then linear
>> Estelle Weyl: So when I give it focus it's gonna change to yellow then nearly and when I remove focus, it's still invalid.
>> Estelle Weyl: That didn't work.
>> Estelle Weyl: I didn't declare it correctly. Okay, so here it goes to yellow slowly.

[00:05:37] And when I remove focus, it goes to red in a jerk fashion. So as it goes to red, it follows the steps. As it goes to yellow, it follows the linear, right?
>> Estelle Weyl: So one of the problems with the transition is there's a limited method of initiation. So here you saw that I did a focus.

[00:06:05] You can do it on the change of a class, but you have to actually change the class. You can do it on hover. There's limited ways to initiate it, and you can't force them to finish. If I go like this, and then step out of it, it went back.

[00:06:22] You see it didn't make it all the way to yellow, and in one direction it was linear, and in the other direction it did the five steps.