10 great CSS animation resources

[Rss Bot 1]

Creating meaningful and beautiful CSS animations can be time-consuming and difficult, but luckily there are some great resources out there that you can use to jumpstart your creative process, and explore different areas in depth.

This resource collection includes all the best CSS animation libraries. Pick one that suits your project and start straight away, or use them as a starting point to create something custom for your brand. There are also some handy crib sheets and shortcuts to supplement your learning.

01. Animate.css

This library includes 76 essential CSS animations

This library bring together no fewer than 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.

The library is an impressively small file size when minified and gzipped, but if you don't want to load the entire thing into your site, the project is also a great source of inspiration. Compiled by Dan Eden, this library includes almost every CSS animation you could need. 

02. Hover.css

Hover.css focuses on button interaction 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. The library has almost every animation you might need for interaction.

03. CSShake

CSShake focuses on shaking animations

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 un-ignorable, sometimes crazy or violent-looking animations.

04. Obnoxious.css

Want to know how not to do CSS animation?

Obnoxious.css was created by Tim Holman and is exactly as the name suggests. The library explores what is possible with CSS animation, but illustrates perfectly what you should not be doing with CSS animations. While presented as a product-ready animation library (and it is), it is intended to be tongue-in-cheek. Brace yourself.

05. Replainless.CSS

These animations are super-fast

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 (so long as they’re used correctly). By not requiring a reflow or repaint, these animations are super-fast and performant!

06. Animate Plus

This animation library is great for mobile sites

Stripe 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.

07. Motion UI

Powerful animators like Motion UI are useful CSS tools

This Sass library from ZURB 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.

08. BounceJS

Use this tool to create your own library of 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.

09. GreenSock Animation Platform

Go further with GreenSock

GSAP is a JavaScript animation framework. If you're creating more complex animations (such as in banner ads or hero images), 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, but does present a bit of a learning curve. To find out more, take a look at our guide to GSAP. 

10. Easing functions cheatsheet

Easing functions are easier with this cheatsheet

Timing functions specify the rate of change over time, and this site helps you choose the right one for your animation or transition. It features a gallery with Bézier curves where you can preview them, and quickly copy the code.

Read more:

• Understand the 12 principles of animation
• How to debug web animations
• Create and animate SVG Polygons

View the full article