CSS Transitions

[00:00:00]
>> Now we're gonna be doing a little bit of coding. And we're gonna be talking first about CSS transitions and especially how they differ from animations. So, in a general sense, a transition is the in between, between states. So that's why, with some animation libraries and tools you've also heard of them?

[00:00:22]
I'm referring to what are called twins. And so these twins are, like I said, the in between states of like you have one discrete state and another discrete state. And he wanna you can just go between those states over time. So you could transition and a lot of things in CSS like we talked about.

[00:00:41]
You could transition color, even things like font size which again I don't recommend you doing. And things like transforms and opacity. So you use transitions when you wanna define a way like just it's not a strictly defined animation, it's more like I am gonna say what each of the states are in CSS.

[00:01:05]
And I just want CSS to be responsible for smoothly transitioning between those states and not really caring about exactly what happens between those states. But instead of saying, get me from point A to point B in the smoothest way possible. All right, so to do CSS transitions, we're gonna be working from this file over here.

[00:01:26]
It's called 01_transitions. And so in the index.HTML we have a simple form over here. And I'm gonna get rid of this on click. And so this form hasn't input any button. So this is the basic thing that we're gonna be animating in this exercise, but first we're gonna be of course talking about what transitions actually look like in CSS.

[00:01:55]
Okay so let me delete this. Let's go back to our scratch pad. Let's say that we wanna animate this fall in different states. So first of all, there's a lot of states in CSS which are built into to each of the elements. And you could toggle these states like by going over here and clicking this :hov which stands for hover in styles.

[00:02:26]
And so there's a few elements states that you could toggle between such as active, focus, focus within, target, hover, visited or focus visible. So we're gonna be using hover just because that's an easy way to show the difference between different states. And I'm gonna be setting a solid background color for this just to illustrate.

[00:02:52]
And let's see that when we hover over the ball, so, hover. We want the backgrounds to instead be blue. So what's gonna happen right now is that when I hover over it, it's gonna immediately transition to blue. And the reason is because there is no transition to find.

[00:03:15]
No transition of any length of time to find so it's just gonna immediately go to blue. So there's a few properties that we could talk about to define how to smoothly transition between these two stats from this reddish color to blue. And so the first one is transition-property.

[00:03:36]
And so this is gonna be the property that we wanna transition. It's telling the browser, hey, this is what we wanna smoothly animate from one state to another state. So I'm gonna set this to background, or you could even do background color because background is actually a shorthand for various things like background color, background, position, size, etc.

[00:04:01]
But we'll just do background for now. And so this alone won't do anything. We're still gonna get it immediately gonna blue. So we're also gonna set a transition in duration. And just like we talked about, this is how long it takes to get from one state to another.

[00:04:22]
And so let's set this to one second. So now when we hover, it's actually going pretty smoothly transition from red to blue. It feels nice, it's not even linear. So let's take a look at what's happening over here. We're gonna move this up a little bit. All right, so we have the transition property and the transition duration.

[00:04:45]
The default transition easing, or the transition timing function is gonna be ease. This might be browser specific, but I believe that for Chrome it is and so let's change that. So let's say transition timing function and make it linear. Here you're gonna notice it's not gonna be as smooth or it's sorta hard to tell with with colors but, you could see the transition timing function over here.

[00:05:18]
And that's another side note, by the way. When it comes to movement, such as changing the transform and things such as color and opacity, your timing functions are gonna feel a little bit different. Like for example, for the color it might not even make sense to use in easing such as ease in or ease and outer, a custom cubic Bezier.

[00:05:45]
And you might wanna stick with linear or you might wanna stick with whatever the browser the browser default is. So yeah, let's make a little bit of a better example here. I'm actually gonna push this ball to the left or to the right actually and just make it in the center, or almost the center.

[00:06:05]
Centering in CSS is hard, actually it's not hard but like this is almost the center. And so what we're gonna do is we're actually gonna change the size now too. Now, like we talked about, what you really wanna do is animate the transform and opacity instead of doing things like animating the width or the height.

[00:06:27]
So, that's exactly what we're gonna do. We are gonna transform and we are gonna use the scale value to say hey I want this to be twice as big. So now when we hover over it's pretty big. But it's it's not animating yet. So does anyone know why it's not transitioning smoothly?

[00:06:51]
>> Because we only have transition property on. We don't have transition property on the transform.
>> Exactly. So we only have a transition property on the background. So that's something really useful to know, like when you define the property it's only gonna apply that transition to that property.

[00:07:10]
Now, if you're lazy, short on time you could do transition property all and so that is gonna transition basically anything that is transition able. So when we hover over this, we see that it's getting bigger and then smaller. But now, let's say, of course, we only wanna transition.

[00:07:35]
Let's say we only wanna do the transform so I could do that and so now you're gonna see that it's gonna smoothly expand but it's immediately gonna change to blue. And immediately changed back to red. Now, if you have some other properties, for example, let's say I add a opacity of 0.5 to hover.

[00:07:59]
And now let's say that we do wanna animate the background color and the transition but we don't wanna animate or sorry transition the the opacity. So if we do all it is gonna do all three of those properties, so we're gonna have it a little bit transparency and it's gonna smoothly animate to everything there.

[00:08:24]
But with transition property, you could actually specify specific properties that you wanna transition. So we could say I only wanna transition the background and the transform. So now you're gonna see that the opacity immediately transitions to transparence. The color smoothly animates and the transform smoothly animates as well.

[00:08:52]
Now, additionally and so this is one of the really interesting things about CSS. I'm gonna remove the opacity and we can also specify different durations for each of the properties. So I can say that for the background, we want that to transition over one second, but the transform, we might wanna transition that over three seconds.

[00:09:17]
So now the color has fully transitioned after one second but the scale it takes about three seconds to do it. Now same thing here if we're okay with our background transitioning but we in a linear way but we wanna change the timing function for the transform then we could just change that over here.

[00:09:42]
So again this is gonna match up with transform and. And ease in out is also gonna match up with transform. So it's dependent on the order. And so now, we're gonna see that it's gonna scale smoothly over three seconds from larger to smaller. So the last thing I wanna talk about over here is that not only can you specify just the overall transition for an element but you could also have it's dependent on which state it's in.

[00:10:27]
So, let's say that when I over out, I so actually I'm gonna move this over here, just so that you see. And we're gonna say transition duration 0 seconds. One other quick notes. You cannot do transition duration zero and that's because CSS at least for timing. So for both animations and transitions it needs to know the unit.

[00:10:56]
You might think that's a little bit silly because zero milliseconds is the same thing as zero seconds but your animation won't work or the zero second duration will not work unless you specify the unit over there. So that's a code that I found many years ago and it sorta broke all my animations so I'm passing it on to you so you not to make the same mistake that I made.

[00:11:20]
All right, so now let's look at what happens. When you hover over it, it's gonna smoothly transition but when you hover out it's gonna immediately snap back. And so that goes to show you that we could actually change the different transition properties dependent on which state it's in.

[00:11:41]
So when we're hovering over it, it's gonna be taking whatever transition values you define in that state. And when it's not hovered, it's gonna use this quicker duration. So hover, it's gonna take its time. I'm gonna help her out. It's gonna go really fast and snap back. Now, tying this all together I always recommend especially to avoid confusion to specify each property.

[00:12:15]
Or yeah, so each declaration over here transition property, transition timing function, transition duration and also even transition delay. So if we have transition delay of 0.5 seconds, then you could see that when we hover, it takes half a second before it actually starts working and then it's gonna immediately snap back.

[00:12:37]
Okay, but there is a shorthand for all of this. So I'm gonna use all for this and we are gonna let's get rid of this. And so we're gonna say transition all. So these are the properties that you're using and now the order is important here. We wanna specify the duration first and then the delay.

[00:13:04]
So the duration, we could say 2 seconds. The delay we could say is 0.5 seconds. And then we could add everything else such as let's say that we just want this to be ease and out. And so what this is gonna be is a shorthand for all of our transition properties.

[00:13:28]
Now, if you wanna figure out which properties this expands to. Then in the depth tools, you could click this little carrots over here and you could see, okay, we're doing property all. The duration is 2 seconds, the timing function is ease-in-out and the delay is 0.5 seconds. Now, when I'm trying to remember this, the most important thing is the order of duration then delay, because CSS is actually pretty smart.

[00:13:59]
So that if you put ease-in-out at the beginning for whatever reason, it's still gonna work the same. So just keep the order of the duration and the delay in mind any questions?
>> What's the downfall of using all versus naming each property individually?
>> So the downfall is it's just a matter of not being explicit if you use all then there are gonna be things that animate that you might not wanna animate.

[00:14:28]
And so we just saw a couple of examples over here. So in terms of performance and things like that, again, if you're only changing things like transform and opacity and maybe things like color, then it's not gonna affect performance too much. But then if you need to change to things like left, or margin or padding, then those are gonna fall into that all category.

[00:14:53]
And now you're gonna run into performance issues. So a good way to prevent yourself from that foot gun is by specifying the properties. And also, let's say that we do accidentally add, like a wonder how this is gonna look padding 3rem. So now when we hover over it.

[00:15:16]
It's actually gonna, wow. That was a little weird. So we might say like you know what, we actually didn't wanna animate that padding. I'd like that that just looks really weird. And you can also see some of the janky happening there too. So, not really too pleasant. What you could do is even if you use the shorthand, you could specify the properties after that.

[00:15:37]
And because of how CSS works, you are overriding those the expanded transition properties and saying. I hate instead of transition all we actually want these properties. So now. It's gonna apply the padding immediately and it's gonna smoothly transition the properties that you specified. And again if you look over here we see that this transition property is being overwritten by this one down here.

[00:16:11]
Yeah, so the pretend this is all but yeah it's overriding all in just transitioning the background and the transform.