10 Best CSS Animation Resources
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.
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.
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.
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.
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.
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.
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.
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.