Check out a free preview of the full CSS In-Depth, v2 course:
The "Overview & Transition 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:

Transitions can change styles over time. A link hover style is a transition that happens over 0 milliseconds. You can specify a time, easing function, which properties you will transition, and whether you should wait before starting a transition.

Get Unlimited Access Now

Transcript from the "Overview & Transition Properties" Lesson

[00:00:02]
>> Estelle Weyl: So now let's move on to transitions and animations.
>> Estelle Weyl: If you are following along, the URL is estelle.github.io/cssmastery/animations. If you haven't heard me say this before, all you have to do is remember my name, Estelle, go to my GitHub, estelle.github.io. And either look for the CSS mastery class and click on the Animations link or go to CSS mastery and you'll find the link there.

[00:00:32] So first lets talk about transitions. Now I can ask the question. Who here has ever done a transition? Everyone has, because everyone has changed a link color on hover, right? That's a transition. It is a transition over 0 seconds. You can say take a full second to do it and you have really bad user experience.

[00:00:53] But you can do it. You can also say, basically, all the lengths take two seconds before you transition as a nice little April Fool's joke or a horrible April Fool's joke. Okay, so let's talk a little bit about the transition properties. I just showed you how simple a transition is.

[00:01:11] You just basically say, do it over one second, we're good. But we have several transition properties. We have the transition-property property, which is the properties you want to transition. The key term all, which is the default. Your transition duration which is how long should the transition take. You have transition timing function which is a bezier curve of transition and we'll go to deep dive into this during the animation.

[00:01:35] So if you don't understand that yet, don't worry. Transition delay is the seconds or milliseconds and it is required that you include the s or the ms before the transition starts. The ms and the s are both required for transition duration and transition delay. And then there's the transition, which is shorthand for all four properties.

[00:01:54] So, in this example, ooh, that is bad. But, yes, it is transitioning. On hover, when I hover over the code, the color goes from black to red maybe, I don't know. The font size goes from 85% to 120%. The background color goes from white opaque to white slightly less opaque.

[00:02:19] And here we go. It actually is blue not red. The color used to be red on this deck and I changed it to blue. I did a global search and replace and this is what happens. So basically it's the same as writing. So what I wrote, my transition code is code, transition, color, font-size, and background size over 2s, ease in, but wait 50 more seconds for it to go.

[00:02:47] So if I go like this, it can start transitioning coz I was off that slide for less than 50 milliseconds. If you gonna do a transition effect on a link other than just changing the color, it's good to wait 50 milliseconds just in case someone is dragging their mouth so in part page the other.

[00:03:05] 50 milliseconds is not long enough for someone to notice the delay, but having something jump out at them is noticeable. I could have also written all, 2 seconds ease in 50 milliseconds. What is transitioning is any property that is from the previous state to the current state.
>> Estelle Weyl: A better effect because you saw how choppy that was, right?

[00:03:33] Would be to actually use transforms. So here, look how nice and smooth that is. The problem is because I'm transforming it I'm growing it, right? Before, I was pushing the bottom code down and here I'm not, I'm actually going right over it.
>> Estelle Weyl: Okay, so when you're transitioning something, the stacking context comes up.

[00:04:00] So that's why, cuz the index might be the exact same, but that code is gonna be on top of it because the bottom one is not being transitioned. So this is a better effect, has better performance but it might not the effect you want. Yes.
>> Speaker 2: Keep the same items, in the flow of the page when you're transforming it like that and making it big.

[00:04:21]
>> Estelle Weyl: Yeah, nothing else would have moved. It's only repainting that one element and it's growing it bigger.