A long, long, long time ago in there was no animation on the website. Just text, sometimes images, and hyperlinks. Then web developers used to animate elements on websites via JavaScript. That worked and still works, but today we can use CSS properties to make awesome animation on a webpage. In this post, I show you how to do that.
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.
Secondly, as I mention in the intro, there was a time when web developers use JavaScript to animate elements on-page. Some developers still do it in this way. Is it a bad idea? If you are able to animate elements using CSS properties do it in this way.
It’s most likely that you know, CSS loading before JavaScript. If the internet connection is poor, it will take a while before animations fired up. What’s more, Google scores how long it takes before the page fully loads. You know by now that visitor’s experience are very important, and rendering engine in a web browser is able to smooth animation when there are set up in CSS.
Lastly, the web browser can disable CSS animation, when somebody switches on other tabs. When animation is implemented in JavaScript it will work even if you guest temporarily viewing another page. JavaScript continually uses computer resources, and this could drive throw situations when your guest computer slowing down, and perhaps your next client discovers it’s because your page absorbed some resources and will close it. What’s worse he or she will remember that this page absorbed resources, and won’t open it anymore.
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?
Perhaps you are disappointed because I showed you how to move web elements from side to side, but animation declared in JavaScript can do much more. Don’t be upset. I started with simple animation, just to show you how it works. The truth is that you can do much more.
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:
See the Pen Animated – SVG Birds by Steven Roberts (@matchboxhero) on CodePen.
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.
