I know you're eager to start building animations, but I just wanna have a very quick word on animation performance. There are many factors that can affect the performance of your animation, but by following a simple rule, you should be in a good place most of the time. So always think of what CSS property you are animating and how it affects the whole page layout. I've changed the animation from the previous lesson. So in this one, when I hover over the square, it's sort

I've changed the animation from the previous lesson. So in this one, when I hover over the square, it's sort of scaling up and down and I've called this animation scale down. So don't worry about these key frame syntax and the animation here. We will cover all of this in this course, but what I wanna draw your attention to is that animation is animating the transform CSS property. Now the transform CSS property is one of those

that animation is animating the transform CSS property. Now the transform CSS property is one of those that is considered safe and performance to animate and the reason transform doesn't affect any other elements layouts. Check this out in the markup for this demo, I am going to add a bit of text here. Let's animate. And so here's our text and if I hover over the square, you will see

And so here's our text and if I hover over the square, you will see that the Let's Animate text is not moving at all. And this is because the transform property is taking the elements out of the layout and applying the transforms within itself so it's not moving and shifting anything around it. Alright, let's try something else. If I scroll up here and look at the square definition, you can see the height and width is a hundred pixels.

If I scroll up here and look at the square definition, you can see the height and width is a hundred pixels. And so if I was to recreate this with width and height instead of transform, we would actually not need a from key frame at all. And for the two I would have with 80 pixels and height, 80 pixels, which essentially would be the same to scaling down to 0.8. So let's go and compare the results. Okay, the square looks exactly the same

So let's go and compare the results. Okay, the square looks exactly the same and now let's go hover over it and aha. This time the text below is moving and basically the whole layout is shifted because of the animation on the square. Matter of fact, let's open the dev tools and I will use the comment palette to show the rendering options. So in this panel, there are really interesting tools

rendering options. So in this panel, there are really interesting tools that you can use like paint flashing that's going to highlight whatever parts of the layout needed to be repainted, which can be inexpensive calculation. And so as you can see, the Let's Animate text is being repainted at all times, every frame. Whereas if I go back to what we had, like so and I hover over the square, only the square has

Whereas if I go back to what we had, like so and I hover over the square, only the square has to be repainted, obviously. Super simple example here, and I don't want to go in into much details, but whenever the browser needs to compute a repaint and do some calculation, it's going to use the core processing units, the CPU, and uh, it's used for other tasks in the operating system. So if there is another action that's happening

and uh, it's used for other tasks in the operating system. So if there is another action that's happening behind the scenes, the animation might lag a little bit. In contrast, whenever you do this transform or opacity or other uh, CSS properties that do not trigger a layout shift and repaint, uh, the GPU, the graphics processing unit can be used and it's hardware accelerated and it's super buttery smooth 60 frames per second.

and it's hardware accelerated and it's super buttery smooth 60 frames per second. So most of the time try to stick to typically really it's really transforms an opacity if you need to animate and non-performance assesses properly here and there. This is not the end of the world, but as much as you can, you should try to stick to animating opacity and transforms exclusively. Alright, this time I promise we are going

to animating opacity and transforms exclusively. Alright, this time I promise we are going to go into making our first animation and CSS transition.