All right, I've promised it for long enough. Let's make some animations. We're gonna start with the very basics of animation for the web and CSS transitions is a great place to begin a journey. So I've got a starting point with this blue square that might look familiar, but at the moment it does not have any sort of animation or motion. Here's the markup. This is just a div

of animation or motion. Here's the markup. This is just a div with a class of square. And our layout, which is a basic HTML shell, is loading a CSS transitions. That CS CSS file, that file here it is right there, just has some basic styles for a square. So it's a square of a hundred by a hundred. The background color is the laas blue and there's a subtle border radius.

The background color is the laas blue and there's a subtle border radius. Alright, so we'll want to change the styling of the square and we'll do this on hover. So we can see the before, after, by using the cursor. Uh, and so we want to change some properties, uh, whenever the element is hovered. So why don't we start with a rotation? So we want to target the square on hover, so square column hover.

So we want to target the square on hover, so square column hover. But with modern CSSI can also use nesting. And here you go, M percent hover. This is the same. And here, let's say that we want to apply a transform and we are going to rotate our square by 45 degrees or dug. So now this square is straight and when I hover it root, it rotates by 90 degrees and maybe I will add a wrapper.

and when I hover it root, it rotates by 90 degrees and maybe I will add a wrapper. I have this class that just adds some padding so it's not flush against the edges. And so now our square should not touch the edges, which is just a little bit nicer. Okay? Okay. So now we are in this situation where the square sort of teleports from A to B, it snaps into the final rotation position and we want to instead make it a smooth transition.

it snaps into the final rotation position and we want to instead make it a smooth transition. And so there's a conveniently named transition property for this, which is a shorthand for multiple properties. But we're going to start with individual properties of the transition. So the first thing we want to determine is how long the transition should take to go from A to B. And for that I can use the transition duration and have a duration like this in seconds.

And for that I can use the transition duration and have a duration like this in seconds. So 0.3 seconds or I could have 300 milliseconds, which is another option. It's up to you if you want to use seconds or milliseconds here. Just know that if you do things in JavaScript, you will be able to do milliseconds but not seconds. So that's one maybe reason to choose milliseconds, but there's nothing wrong with using seconds.

So that's one maybe reason to choose milliseconds, but there's nothing wrong with using seconds. So we have just applied transition duration, nothing else. And let's see what happens to our transform. Now I'm going to hover over the square and nice. We have a smooth transition. When I get away from the square though. Oops, let's take a look at that. Abrupt. All right, so you might understand what's happening here. We've applied a transition duration,

All right, so you might understand what's happening here. We've applied a transition duration, but we've applied it inside the hover close. And technically when we move away, uh, when we move the cursor away from the elements, there is no hover normal. So this transition duration is never applied. So there's a simple fix. We can move the transition duration into the actual square definition, not the hover block.

We can move the transition duration into the actual square definition, not the hover block. And now if I try to hover again, smooth in and smooth out there, re cool. At this point, based on the previous lessons, you should have an alarm bell going in your head. We are doing a rotation animation, and so we should guard it with a at prefers reduce motion check. If you did feel that alarm bell, good job.

with a at prefers reduce motion check. If you did feel that alarm bell, good job. We should here have an at media prefers reduce motion, no preference, and then in here, targets the square and set the transition duration inside of there. Now I feel like I've spent enough time telling you how important it is to respect the user's preference with reduced motion, but writing this ads pre prefers media query everywhere is going to get in the way of the learning here.

but writing this ads pre prefers media query everywhere is going to get in the way of the learning here. So from this point forward, I am not going to guard any of the animations we write in a preferred reduced motion check, but you need to be aware that you should do it and have the context that everything we do should be wrapped in one of these. And with that said, I'm going to move the transition duration back up here and get rid of the media query check.

to move the transition duration back up here and get rid of the media query check. There we go. So we know about transition duration. Now to continue our learning, let's layer another animation on top of the rotation on hover. Not only do I want to rotate my square, but I want change the color, the background color to tomato. All right, let's try that. I'm going to hover my blue square and it's going to rotate and morph to tomato.

All right, let's try that. I'm going to hover my blue square and it's going to rotate and morph to tomato. Okay, so as you can see, both the background color and the rotation have this 300 millisecond transition happening. What if, however, we wanted the color change to be abrupt, but the rotation to still take 300 milliseconds? Well, I am glad you asked. This is where another transition specific property can be used.

This is where another transition specific property can be used. And this is literally called transition property by default, if not specified, the browser is going to try to transition all the CSS properties that can be animated. Uh, but you can use transition properly to specify which ones you want. It can be useful if you want to achieve a special effect or also for performance reasons. So hey, let's say we want to transition the rotation

or also for performance reasons. So hey, let's say we want to transition the rotation but not the background color. So the property I want to transition is the transform property. I will specify transform only for now. And now our square should rotate smoothly, but the background color change should be abrupt. And yep, it's, let me slow the animation right down. Let's go 800 milliseconds to make it more obvious.

And yep, it's, let me slow the animation right down. Let's go 800 milliseconds to make it more obvious. So now the rotation is going to be very slow, uh, and the color is clearly abruptly changing. ES copilot showed you just before you can comm separate, uh, different values here. So if we wanted to also animate the background color, I could right there say background color as well. And so now we should be back to the same effect where the color ends.

And so now we should be back to the same effect where the color ends. The rotations are animated, but we are specifically saying to just animate these two properties. So if other properties were changing on hover, those would not be animated. Let's restart one more property on hover. So we go border radius and not 50%, but I will have two RAM here.

So we go border radius and not 50%, but I will have two RAM here. So we go from 0.25 to two rems. So take a second in your mind to work out what's going to happen when I hover the square. Alright, ready, hover and the background color and rotation are smoothly transitioned, but the border radius is abrupt. Okay, let's add border radius to the list of animatable properties in this transition.

Okay, let's add border radius to the list of animatable properties in this transition. So we should have all three properties smoothly transitioning. Ah, this is pretty satisfying to watch. Let's look at it one more time. In and out. All right, so now you know about the transition duration and the transition property, and we are going to continue our learning in the next video.

and we are going to continue our learning in the next video.