10 Best CSS Animation Resources

close

CSS animations are great, when implemented correctly, but making these animations can be time-consuming and challenging at times. Luckily there are some great CSS animation libraries to make your animation workflow smooth and easy

Choose any one that best suits your projects.

1. Animate.css

This library brings about 76 animations, all created in CSS and ready to use. Simply reference the CSS file, and when you add classes to an element, the animation happens. This works best when adding or removing classes using JavaScript.

2. CSShack

CSShake is a library of CSS animations dedicated to making elements shake. The library has a number of classes you can add to elements to apply one of many different shake animations. The animations use keyframes and utilise the transform property to create these crazy animations.

3. Hover.css

Similar to Animate.css, Hover.css is a collection of CSS effects you can use in your projects. This library was created specifically for button interaction animations. The library can be downloaded in vanilla CSS, Sass and Less, allowing these animations to fit into any project.

4. GreenSock Animation

GSAP is a JavaScript animation framework. If you're creating more complex animations. GSAP offers a set of tools for handling playback, SVG tweening and more. This is great if you want to go further than what can be done in CSS animations.

5. Motion UI

This Sass library from ZURB Foundation makes it easier to apply custom animations to your UI. It's a little more involved than some of the other libraries on this list, but very powerful. You can create and tweak animations to meet your needs, then invoke them using JavaScript.

6. Repaintless.css

Replainless.css in a small and lightweight CSS animation library with a focus on creating animations that do not cause a repaint from the browser. By not requiring a reflow or repaint, these animations are super-fast and performant.

7. Animate Plus

Animateplus is well known for its beautifully animated product pages. One of the masterminds behind these, Benjamin De Cock, has created a CSS and SVG animation library that is performant and lightweight, making it particularly well suited to mobile.

8. Obnoxious.css

Obnoxious.css was created by Tim Holman and is exactly as the name suggests. The library explores what is possible with CSS animation, but shows perfectly what you should not be doing with CSS animations.

9. BounceJS

This is a useful tool if you want to create your own library of animations. It has lots of fun presets and takes the heavy lifting out of writing complex animation code. It uses advanced transform operations to create the animations, which can then be added to your own animation CSS file and applied as you wish.

10. Animatelo

The name sounds familiar, yah you guessed right. This is a porting to Web Animation API of the fabulous animate.css. It is a bunch of cool, fun, and cross-browser animations for you to use in your projects.