CSS Transitions

[00:00:00]
>> Kevin Powell: So moving past user interaction, but sort of playing into it and even building on top of it a little bit, we're going to be looking at transitions to start with, and then move into animations from there. We're going to start bringing a little bit of life to our pages. These are sometimes used for user interactions, like if we have a hover effect like this one with no transition versus when we transition, so it sort of fades between the states instead of just instantly jumping.

[00:00:24]
Now creating a transition is actually really easy to do. We have a transition property, so the naming makes sense. Let's say we have this box that's right here, and you can see on this box, I have a hover, so the background is changing to a different color, and I have a transition of 1 second. And if I hover on top, oh, I have a rotate on there too, I didn't even notice. So when we hover, we're rotating it and the background color on it is changing.

[00:00:51]
Very straightforward transition, how long should the transition take, and that is all you really need, but there is more to this property than just that, we have a lot more control than what we see here. Like a lot of the things we've been looking at so far, transition is a shorthand. We have a number of properties, so this is actually just setting a transition duration of 1 second. Now, it will continue to work even though that's all I've said, because I have a transition on there.

[00:01:27]
But we also have the transition property as one of the longhands, we have a transition duration, timing function as well, and there's one more I'm forgetting that I have down here, transition behavior, and the reason I forgot transition behavior, it's quite new, and deals with very specific situations. You won't need to declare it too often, so we might look at that, we'll see, but the main ones you'll be using are your transition property and your transition timing function and your duration.

[00:02:02]
Often I use all of these in the shorthand, the order of them doesn't matter. Transition property is you're telling it what to transition. If you don't tell it, it will be a transition all, so it just means everything is transitioning. And the timing function, I think by default is ease, though I'm not entirely sure, we'll see more of what this even means in a second, but if we do that, we can see it's transitioning.

[00:02:27]
Let's say I change this transition property to only be background. So now the rotate won't transition, but the background still does transition. So we have that option of doing that, kind of weird in this simple use case, but it's an option that you have. You can also list multiple ones in a comma separated list, so I could say I want my background and I want to do my rotate here. And now, it will go back to being both of them.

[00:02:58]
There are some things that are more performant to transition than others, so I tend to always put a list of them instead of just relying on all. We'll talk more about that in a little bit. The duration here, because I have a comma separated list here, I can also do a comma separated list here. 1 second and 10 seconds. The color will switch in 1 second. The duration, or the rotate will take 10 seconds.

[00:03:26]
So now, it goes that way. A nice thing with transitions is even though it's not finished yet, if I go off, it doesn't do anything weird, it just starts going back to where you'd expect it to be going back to. And I could do different timing functions for both of them as well, but I want to look at my demo for timing functions to understand what those are. So these are boxes that are all transitioning.

[00:03:48]
They all look like they're transitioning at different speeds and other things, but they're actually all transitioning with the same duration, the same property, and they have a display flex, we don't really need that. I think it's just I use that to center the text. But the big difference is each one of them has a different timing function on it. I have a linear at the top, ease in, ease out, ease in out, and step end.

[00:04:14]
Step end's a weird one, you very rarely use it. There's times when you want like animations or transitions that go in chunks instead of transitioning over, that's when you might use it, but ease in, out, out, in, and linear are the most common. So you'll notice they all start and all stop at the same time, but they get there in different ways. Linear just means same rate the entire way, there's no change.

[00:04:42]
Ease in means we're going to ease into the animation, we're starting slow and speeding up. So it starts behind all the other ones and by the end it's going the fastest. Ease out is the opposite. Ease out is going to start really fast and then ease out of the animation so it slows down near the end, and as you might guess, ease in out, starts slow, speeds up, then slows back down. So if we look at that one there, you can see it does that, and the step end, as I said, just jumps between one and the other one.

[00:05:12]
I want to jump back to this one quickly just because with all of those moving pieces, it's a little bit overwhelming to talk about one of them. And let's just make this a 1 second, maybe we'll do like 3 seconds. If you ever want to play with the timing function and you're not sure what you need or what you want, I would suggest that you open up your dev tools. We're going to see if we can fit these on the screen at the same time.

[00:05:42]
Docked on the right. Anytime you've declared a timing function, you're going to see this guy right here that has this icon, and if you click on it, you get this thing that pops up that I might have to zoom out to be able to see properly. Let's try that. Still a bit off screen. One more time. There we go, we see the whole thing. So this shows me my ease function. If I click here, my ease out function, so you actually get a little preview of what it looks like.

[00:06:14]
They have different names, and you can cycle through and go through a whole bunch of different ones through these things at the bottom. I know Firefox has this, I'm assuming Safari does too. I'm not entirely sure. One thing that's interesting with these is as you're going through them, you might notice there's handles on them. You can actually grab those handles and play around with the timing function yourself and come up with custom ones.

[00:06:37]
And when you do this, it's creating a cubic bezier at the bottom. All of these are actually cubic beziers in different ways, the ease in out, the linear, they're just keywords that they provided us as shortcuts to the common ones that people like having. But it's cool to come in and try different things. You go, you know what, I want it to start pretty slowly, speed up a lot, and then it's like a really aggressive version of the ease in out.

[00:07:03]
Or what's really interesting is if you tell it to go up like this, it's actually going to overshoot and then come back at the end. If you're happy with the one you want, you can just copy it down here, go to your CSS. I know it's really tiny because I zoomed out for the dev tools, but instead of, we'll zoom back in. Instead of the ease that I had here, I can paste in that cubic bezier now. And for demo, we'll zoom back out so we see it.

[00:07:33]
Now it's going to overshoot a little bit and then come back and then it does it the same way the other way. It's really slow right now, so it's kind of subtle. Technically, the color is even transitioning past where you want it to and come back because we're using the same timing function for both color and the movement of it, so it's a little bit weird, but you can have some fun with this. It can be hard to come up with really good ones, but you can definitely tweak it and come up with some nice timing functions along the way.

[00:08:02]
Another thing that you can do while you're on here, or not another thing, but there is another set that they've added more recently called linear, which is a linear function rather than the linear keyword. It can be really hard. I've linked to this in the lesson, which is easings.net. This is the best generator I know of for easing functions. So they have all the standard ones, and they give you a nice little preview of it here.

[00:08:32]
Again, you can play with it, create your own. But you might notice they have some interesting things at the top here, a wiggle, a balance, a spring. And we can do things like this in CSS now as well. And there's, they have like the different ways, the mass, the stiffness that you're playing with, these are their words, not CSS words, but just so you can play around and update it. Let's try a bounce, just to see, you get bouncing effects like this.

[00:09:01]
And they give you the code right down here or as a Tailwind class if you need it for Tailwind. I can copy that to my clipboard, come back to my transition. Let's close my dev tools now. And I can paste that in here, and it gives me a super long declaration because it's with this linear timing function. But it does give me this weird like bouncing, which is kind of cool, and then it bounces on the other way back.

[00:09:36]
I think they're pretty neat. I've come up with some fun use cases for them. One thing I would actually suggest, because it's a really, really long, a lot of these times when it's linear ones, is to save them as a custom property. Root of, you know, bounce. Something like that, so you never have to look at that linear timing function again, it doesn't pollute your code causing, like you're down, it might do line wrapping, you never know when the code formatting comes in.

[00:10:07]
So just having being able to do your var of bounce is a lot easier than always pasting in these giant linear timing functions. So yeah, a nice little addition to CSS not too long ago with those ones. The one I haven't looked at yet was delay. Delay seems like a really weird one. We'll look at it here first actually, where I could do a transition duration is 3 seconds, then let's do a transition delay, say 1 second for now.

[00:10:34]
If I go on here, it just means we have to wait a second before it starts. Then it does it. And then if I leave, nothing happens for one second and then it goes. That seems really weird because you're delaying the interaction like usually these types of interactions are because the user has done something, and then you're like, no, don't do anything for a little while, it can seem a little bit bizarre.

[00:10:53]
So the reason you might want to delay something is because you're chaining together multiple different things, and you need one of those steps to start later on than the other ones. I'm not going to dive into how this all of this, but it is linked in the code if you want to dive and look at it a little bit more closely. But with this navigation, we have some transitions coming on. You can see there's a staggering as they come in, and when I close it, they're leaving, and then I want to close the navigation.

[00:11:26]
So when the navigation is closing, I'm adding a delay of 200 milliseconds to make sure the elements have time to start leaving before the rest of it starts to close, the users got the feedback they need, they know things are moving away, and then I can also make the rest of it go at the same time. Really importantly, don't make any of these too long. Even this is a very long time to open a navigation and then close it.

[00:11:49]
It looks cool, so maybe the user's happy because they're just like a little bit of delight coming through with the interaction, but users expect things to be relatively immediate, and if you have like a 3 second thing going on as the user's trying to interact with the document, it can be a bit annoying. So transitions can help, especially if they're very short, snappy things. They're really long and the user's stuck waiting for things to appear or disappear from the page or transitions or whatever it is, it can be a little bit annoying.

[00:12:18]
The other thing that's really important with transitions is we want to be really careful with what we're transitioning. We had the question that came in earlier about using positioning to move navigations off the screen, is that what we use to slide them in and out? We could use that. The problem is when we start transitioning top, bottom, left and right, which we can do, you can transition any properties you want, or most properties, not any properties, but the large majority of properties can be transitioned.

[00:12:45]
When you start transitioning them, the browser has a lot of work to do. It can cause repaints on the page, especially if you're moving something that's impacting where other things are on the page, that causes all those things to be repainted by the browser. But even if you're just using top, bottom, left and right, the browser's putting a lot of work into it. The general rule of thumb is try and only deal with transforms and opacity.

[00:13:09]
We're going to be looking at those in the next lesson. Sometimes you do have to transition other things, it happens. Just double check on lower end devices to make sure that it's not a really janky animation or a transition that's coming in. But transforms and opacity have the advantage of being hardware accelerated, meaning the GPU is involved in it, and so it tends to lead to very nice 60 frame per second transitions and animations.

[00:13:33]
When you start getting into other properties, that's where things can start getting a little bit slower on the frames per second, doesn't look as nice for the user, and then the whole point of having the delightful thing goes away because it just gets really, you know, low frame rates and it doesn't look so nice. The last thing I want to talk about before I leave this lesson is a little bit on times.

[00:14:04]
Times are a very unique thing in CSS. I think they're the only unit that requires you to include what the unit is. Normally a 0 is a 0 is a 0 in CSS because it doesn't, 0 is 0. It doesn't matter what it is. So you've probably seen me on a lot of things I'm doing, width doesn't make much sense, but you might say width 0. You don't have to say it's 0 pixels, 0 rem, 0%, because 0 is 0 is 0. If it's a timing thing, a duration or a delay, if you put a 0, it will actually break things.

[00:14:43]
In this case, because I'm using the shorthands, it might not. But I'm pretty sure if we do a transition, we'll say 3 seconds. We'll say it's only the rotate. And I'm going to say the shorthand's a bit weird because like I can do a 0 second here for where the delay is. And oh, that's 0 seconds, so we can see it's working. If I do a 0 here, I believe it will break it. Yeah. Because it doesn't know what the 0 is.

[00:15:09]
So it just, it doesn't know what to do and I've broken my transition. It's a little bit frustrating, just means you have to include a unit, no matter what you're doing. It's one of the only times, it could be a good habit just to include units all the time. And you have two units you can choose from. Seconds are very common. You can also do ms for milliseconds. So instead of, you know, if you want 0.5 seconds for half a second for your transition to happen, or you could say 500 milliseconds becomes the same thing.

[00:15:43]
I have a habit of using milliseconds most of the time, unless I know it's like 3 seconds because I don't want to write 3000, but there's not really a benefit to using one or the other, it's just whatever you prefer. Second, millisecond, same thing, you just decide which one you'd prefer to use. And using, I think one of the reasons I use milliseconds is because you tend to want them sub 1 second anyway.

[00:16:05]
A lot of time it's 250, maybe 500, that's quite a long transition. But you also, it's less characters if it's seconds because 0.5s is less characters than 500 milliseconds. You can decide which one you want to use, just always make sure you do include a unit, even if it's a zero. In the last lesson, I mentioned that the main things we want to be using transitions on are our transforms and our opacity.

[00:16:36]
We're going to start with opacity because opacity is the simplest one of them all, where I can just lower the opacity of an element. So opacity 1, it's fully opaque, we can see it. All the colors are nice and vibrant, and if I lower the opacity, I'm just making it transparent. Maybe not the best use case, let's do, we'll grab this guitar, background image. Just to add that on our body to have a background image, so we'll actually see the background image coming in through the section that we have here with the lower opacity.

[00:17:09]
One thing you might be noticing is my content is also becoming transparent. You cannot reduce the opacity of an element without also reducing the opacity of the elements inside of it. The whole thing is going down. Some people are like, I want my section to be lower opacity, but not the image that's in there. It doesn't make sense. We can't do that. So in general, opacity is mostly used for when, especially in animations, you're fading something into the page.

[00:17:34]
That's probably the most common use case really with lowering the opacity of something, just because if you're even doing it with transitions, it can be a little bit weird that the thing is semi opaque or just completely transparent, which you do with an opacity of 0, you don't see it, it's still on the page, still there, you can even see I can like select text, I can't see it, but I'm getting the cursor to be able to select the text because technically it's there, just invisible because I've lowered the opacity to 0.

[00:17:53]
One thing I'm not sure about is if we can put percentages here or not, because I never use that. Yeah, I thought it would work. So you can either do 0 to 1 or use a percentage, the same way that we would do our alpha values when we're doing colors.