Do you like animations on web pages? If so, then you must read this article. I think animation can improve the user experience to a greater extent and make the software you develop operate more smoothly. So how to add and where to add animation will be a big problem. I will show you one by one.
Here is base code in HTML:
Let us take a look at the home page’s CSS settings.
The first thing is the #homepage, we will set the background color to green so that we can observe the animation changes.
This is the basic setting of the current homepage.
— We set the position property of the object to fixed.
— The width is one hundred percent of the current container / parent.
— The height is the height of the screen.
— Opacity is 1. (not transparent)
— There is a transition property , where I will set the duration of the animation 1s = 1 second.
In the beginning, we also mentioned the need to specify a specific location (origin) to trigger the animation.
We will add a class next to the #homepage selector, and this is how to control the animation. There are only some basic settings inside the #homepage right now, and they are set in the currently visible screen. Now, we have to add a new class as a new combination to overwrite the previous settings. The modified difference of each property is the production of animation.
We will use transform to tigger the animation and move the homepage!
— transformX( -100 %) will move the current object to the X axis to 👈.
— scale(0), scale down the current object to 0% = disappear.
Then the transparency is zero, and it takes 1 second to go directly from 1 to 0 = disappear.
And the most important thing is to have more practice, practice and practice.
Please try it in your own and here is the link to codesandbox: