^{Photo by Sai Kiran Anagani Vijayawada}

Animation is fun. It makes everything look vivid. A good animation is that you won’t notice its existence but it pleases your eyes and makes you feel good!

To see fancy animations is really enjoyable, but to make it is not. Specially for me, a CSS -webkit newbie, creating animations with CSS is a dirty job. It needs a lot of guess work and experiments to archive the expect results. Fortunately, there are many interesting CSS effect libraries could support me to fulfill the mission. I would like to recommend 2 useful CSS libraries, which helped me to create “fancy” animations efficiently. All the codes below can be found in my hugo-uno-dark theme repository.

hover.css

Hover.css is a great CSS library. It contains almost all hover effects. On the demo site, all possible animations are well presented. Once you got your favorite one, the implication is easy. You could either go straight forward to include the whole library and add the class name in the HTML tags. Or you could search for the effect inside the raw CSS file and then copy that part into your CSS file. The last step is to add animation class name in HTML tag. It’s a piece of cake. These are stylish animations I picked and what they look like:

Bubble left & right

Underline from left

Bounce to right

Don’t mock me because of my bad animation taste. Once you know how to do it, then you would apply it everywhere. It’s never too fancy, right?

animate.css

animate.css is a super-star CSS library for creating page transitions. Almost all basic (PowerPoint style?) page transitions can be found in this library. The usage is simple. First of all, it needs to include animate.css in your project, file or hosted link as you prefer. Then you only need to add class name animated and effect name in HTML tag.

But I didn’t use this fixed way. I want to add animation dynamically with jQuery. For example, I did for of articles fade-in appearing on post summary page:

$('article').addClass('animated fadeIn')

You may notice that there is a delay of fade-in effect. It’s a CSS trick. Actually, I set a 0.2s interval between the presences of 2 articles:

article:nth-child(2) {
  animation-delay: 0.2s;
}
article:nth-child(3) {
  animation-delay: 0.4s;
}
article:nth-child(4) {
  animation-delay: 0.6s;
}
...

Et voilà, 2 powerful CSS libraries get fancymation job done. During my small “weekend project”, I added other animations for my blog. I had a fun time playing around CSS for animations. Furthermore, I’m happy that I learned how to use 2 awesome CSS libraries, which I could share with you here. #AnimateAlltheThings!