Why use CSS animation on the website?
Let’s start with the reason to use CSS properties to animate website elements. The obvious thing is that animation looks nice, and encourages visitors, to interact with page content. At the end of the day, almost all pages are using to sell something. The first step to do this is to grab attention and encourage visitors to interact.
Let’s fired up some CSS animation.
Now you are convinced, I hope, that CSS animation has an advantage and it’s worth using it on the web page. You can do it just by adding CSS properties to your code.
First of all, you need to call animation and give them some properties. How does it work? You build an animation let’s say that you want to move some element from left site to right site on the web page. I called this animation “slide”:
This is a very simple animation that moves the element from the left side to the right side. The first parameter “from” set start point, and the second parameter “to” declarated where the animation should stop. You can also set a midpoint in the animation If you want to create more complicated animations.
In this picture above, I added one more code line and now your box moves to half of the web page, and after this move back to the left side.
When you set your animation behavior. You can use it a few times. To do this you set in CSS class two properties: animation-name and animation-duration.
In CSS properties animation-name you should add your animation name. In this example, we call the animation named slide. Second CSS Properties set how long this animation should play. I set 5 seconds. This is the simplest way to use animation on a webpage. Fully potential of CSS animation you can check here:
What’s more CSS Animation can do?
For example, you can change element size. Make it bigger, smaller even change shape. You can also change the background color, font size, font style, and so on. But in fact, the sky is the limit. Let’s say you want to have flown birds on your sky background. Here it is:
Is there any CSS Animation framework?
Sometimes you don’t have time to build complicated animation from scratch. There is no problem, you can use some framework. In fact, there are several different frameworks, and as usually you should test some of them and use this which you like most. A quite cool review of available frameworks you can find here:
Is it worth to use CSS Animation?
I hope you now convinced that CSS animation is something worth using. Even if you don’t have time to build this animation from scratch, you can use some of the available frameworks and still have pretty cool animation on your site.