In this article, I’ll show you the 10 best libraries for CSS animations I’ve seen so far.
All in all I have tried about thirty libraries. Some were quite small, some were quite large, but in the end I selected the ten best in my opinion. Note that none of these libraries do not require JavaScript.
- Animista.
In fact, this site I found not so long ago. but immediately fell in love with him. Frankly, I think he alone deserves a separate post.
Choice of animation
You can choose what type of animation you want (for example animation of appearance or disappearance of an element), besides the fact that you can choose a specific type of animation (for example scale-in), you can also choose different options for this animation (for example scale-in-right).
Once you’ve chosen your animation, configured it the way you want, you can get the finished code right from the site. There is also an opportunity to minify your code right away.
- Animate CSS
Of course I can not ignore the attention of Animate CSS, probably one of the most famous animation libraries. Consider briefly its use.
Using
To run, you need to add an animated class to the element you want to animate and then add an animation class name.
If you want to loop the animation, you can add an infinite class to make the animation repeat without stopping.
More features
Animate CSS has some basic classes to control the delay and speed of the animation.
- Vivify
Vivify is an animation library that I’ve always thought of as an improved version of Animate CSS. It works exactly the same, contains the same classes, but is expanded with a few more. Instead of adding an animated class, you have to add vivify. - Magic Animations CSS3.
This library has very nice and smooth animations, I especially like the 3D animations.
But not enough to tell you, try to play with them yourself.
In this library you have to add magictime class and animation name class. - Cssanimation.io
Cssanimation.io is a collection of a huge amount of different animations, probably about 200 pieces and it’s just breathtaking.
The working principle is similar to Animista. For example, you can select an animation and get the code right on the site, and you can also download the entire library.
- Angrytools .
Angrytools is actually a collection of different generators, including a CSS generator. It may not be as diverse as Animista, but there are some things I really liked about it.
This site, as well as many of the previous ones, gives us the ability to customize the duration or delay of the animation. But it allows you to add your own keyframes to the so called timeline and then write the code right there. You can also edit existing keyframes.
- Hover.css.
Hover.css includes a lot of CSS animations that, unlike the ones above, are triggered every time you hover over an element.
It’s a collection of CSS3 effects that are activated when you hover, and can be applied to links, buttons, logos, SVGs, selected images, etc.
They have really amazing animations. What’s more, hover.css also has classes for animating icons, like font awesome.
- Three Dots.
Three Dots is a set of CSS animations for the preloader created from three dots that are actually one element. - CSShake .
And at the end we have the “shaker shake.”
As the name suggests, CSShake is a CSS animation library that contains different types of shake animations.
To run, we add a shake class and an animation name class to our element.