1.2 Creating Animated Transitions With CSS

[SOUND] Hello and welcome to Up and Running with CSS Transitions. CSS Transitions provide us a very simple way to create some subtle animations on our website in response to certain events. And usually, a transition is in response to a hover event. When you hover over a button for example, you might see the background color animate to a different shade of the same color. You might see some slight movement. You might see the corners being slowly rounded. And you can definitely get creative with this and do some crazy things. But for the most part this is useful for creating very subtle animations. So let's talk about this transition property and how it works. The transition property allows us to take a property, a CSS property, for example, a background color. And to animate that property from one value to another value. So for our BTN class here, right now all we have on the stage is this button with a class of BTN. For this BTN rule we've created a background color with a certain value. And then for our hover state we've given that background color a different value. Nothing fancy, we've seen that a million times. We hover over our button, it brightens up a little bit. But what if we wanted to soften up that transition a little bit so that instead of jumping from one color to the next, it actually animates from one color to the next. Well we can do that using the CSS transition properties. Now there are four different transition properties we can use. And then there's also a shorthand property that allows us to combine them all into one. But first let's look at our separate properties. Now when you're creating these transition properties, you're going to define them on the CSS rule that defines the starting point of your animation. In this case, it's the original BTN class. So in the rule for our BTN class, I'm going to skip a couple lines here just to give us a little separation so we can see it a little bit better. I'm gonna create a property here called transition-property. And in this property, we would define or we would tell our browser what property we're trying to animate here. And in this case, we're trying to animate the background color property, which is background-color. Now that by itself is not enough to create a transition. If we hover over our button, we can see it's still not animating. What we need in order to get it to animate is we need to give it a duration. We need to tell our browser how long we want that animation to last. So if we want it to last one second, then we're gonna throw in a second transition property called transition-duration. And we're going to type in 1s here and that will represent one second. If you wanted half a second, you would type 0.5s. Let's go back up to one second and let's see if that works. Let's hover over our button and we see that we now have a nice smooth transition. And that transition goes in the opposite direction whenever we move our mouse cursor away from it. It smoothly animates from one value to the next. And you'll notice that we only have to define that transition rule in one place. We don't have to define it for the original BTN class as well as for the hover pseudo class for the BTN class. We only have to define it in its starting position. So we're starting with a background color of 8014D7. And we're animating to a background-color of a741fe. Well there's another transition property that allows us to affect the speed of the animation. By default, as we hover over our button and this will be easier to illustrate if we change our transition property here to width. So we're gonna change that to width and let's set our ending width to 300 pixels. And you can see up here the starting width is 400 pixels. So we're gonna make our button a little bit smaller when we hover over it. And I want you to keep an eye on the speed of the animation. As we hover over the button, we see that it starts off slowly, speeds up a little bit through the middle of the animation and then slows down at the end. It eases into and out of the animation and it looks really nice. Well there are a few ways that we can affect that speed. Now the duration gives us the overall speed of the animation. But the easing function allows us to affect how the speed of that animation changes throughout the duration of the animation. So this particular property is called transition-timing-function. And by default, it's set to a value of ease where it eases into the animation, speeds up through the middle, and then slows down again towards the end. We have a few other options, one of the options is linear. If we change it to linear and hover over our button, we see that it moves at a constant rate of speed throughout the entire animation. It's kind of clunky, doesn't look real great but that is one of your options. Another option is ease-in with the ease-in function. It starts off slowly and speeds up towards the end. It eases into the animation. The opposite of that is ease-out, where it starts off quickly, and then slows down towards the end. And then we have a combination of those two, called the ease-in-out. We hover over that and we see that that does something very similar to the default ease function, where it starts off slow, speeds up through the middle, slows down towards the end. Now those two values are different. If you look at them side by side, the ease-function is slightly different than the ease-in-out but they do a very similar thing. It just changes speed a little bit differently throughout the middle. Now we have another timing function that we're gonna take a look at later on but for now let's just leave it at. The the last transition property I want to look at is called transition-delay. And this does just what you'd think it would do, it causes a short delay before your transition begins. So once you hover over the button, we can cause a, let's say a half second delay by creating a transition delay property and setting it to 0.5s for one half of a second. So if we hover over it now, we see that there's a half second delay before the animation begins. So as I mentioned, these four properties can all be combined into one short hand property. Let me show you how to do that now. So we've commented that out. I'll skip a couple lines and the short hand property as you might imagine is simply called transition. So we're gonna start with the property we want to animate. So let's say we want to animate the width. We'll say how long we want it to last, let's say one second and then the timing function we wanna use, ease-in-out. And then if we want to add a delay, we can do that last. So with all of that done, we can hover over it and we can see that that animation still takes place. Or what if we wanted to animate two different properties at the same time? Well we can do that very easily with the original method. Let's come at this one now with the original method of using the separate properties. We would just put a comma separated list here. So we could say, width, background-color. Let's say we wanted to also animate the border-radius. So we would just separate them by commas here. And then we would make sure to include new values for all of those down here. So we could also add a border-radius of let's say 40 pixels. So now when we hover over it, we can see all three of those properties animating at the same time. And we can make that even easier by combining all of these into one value called all. And when we set it to all, then any CSS property that's animate-able, if it changes from one value to another at any point in your user's interaction with the website, then it will animate to that new value. So we can hover over that and that gives us the same effect. So we can do that also again, let me comment this out one more time and uncomment our shorthand. We can do that here as well, we would just need to do it a little differently. Notice if I put width and background-color here and then hover over, we see that nothing actually works. But if we do width 1s, background-color 1s, then those two items are animating. Now our border-radius isn't animating, we'd have to add that in as well. Or we could just combine them into one called all, 1s ease-in-out and now everything is animating once again. So let's talk about another easing function called cubic-bezier. Now this particular function accepts four values and those four values are going to be between zero and one. And it's really hard to explain what those do, so we're gonna let a website do the explaining for us. So I'm gonna jump over to a website called cubic-bezier.com. You can see that U.R.L. right here. And this gives us a nice little graph that we can play around with to change our animation. So down here at the bottom, we have our library of default CSS animations, ease, linear, ease-in, ease-out, ease-in and out. We can click on any of those and then when we come up here to the top and click on go, if we watch this bottom blue square, that blue square will be using whichever animation we selected here. The top square, the pink one, is affected by what we do to this graph down here. So however we change this graph and click on GO, that red box is going to animate accordingly. So if I try to make this graph look like our ease graph here and I'm not sure how close I can get it, but let's try. And then click on GO, you'll see that they're actually pretty similar. I was a little bit off but you get the basic idea. Now you'll notice up here at the top that as we move these handles around, these values are changing. So we can kind of get an idea of what these values are. The first two values are the X,Y coordinates of this pink handle here. So as we move this pink handle around, we can see those two values changing. The third and fourth are the X,Y coordinates of this blue handle. So hopefully that will help you understand what this cubic-bezier function does. You can come into this website, play around with those values, and then hit GO. And then whenever you get that pink square animating like you want it, you can just copy those values and you'll see that it gives you a little pop up. You can just copy those values there, hit Cancel, jump back to your website, and punch those values in here, I'll just paste that. It looks like it's just pasting the numbers, so let's go inside the parenthesis there and paste again. And now when we hover over it, it's going to be using that new easing function that we created on cubic-bezier.com. So that wraps it up for our discussion of CSS Transitions. Hopefully, you've learned a lot from this. And hopefully, this gives you a good starting point for creating your own animations in CSS. Thank you for watching. My name is Craig Campbell and I'll see you next time.