15 great CSS animation libraries worth knowing about

CSS animations let you animate the move from one set of CSS styles to another. A CSS animation is made of a style that describes the animation and a set of keyframes marking the start and end states of that style, plus any intermediate waypoints.

CSS animations have three big advantages over traditional script-based animation techniques:

1. They are simple to use for simple animations, you do not even need to know JavaScript to build them.
2. The animations run well even under moderate system load. In JavaScript, simple animations often stutter. To keep performance as smooth as possible, the rendering engine can drop frames and use other tricks.
3. Letting the browser drive the animation sequence lets it improve performance and efficiency, for instance by throttling the update rate of animations in tabs that are not currently visible.

Most animations can be built with plain CSS, but animation libraries and frameworks let you build better ones in less time.

1️⃣ Animate.css – CSS animations by Daniel Eden

2️⃣ Anime.js – Anime.js is a lightweight JavaScript animation library with a simple but powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript objects.

3️⃣ CSShake – CSShake does exactly what it says on the tin – a CSS library built specifically to shake the elements of your web page.

4️⃣ Hover.css – Hover.css is a CSS animation library made for the buttons and other interface elements of your website.

5️⃣ AniJS – AniJS is an animation library that lets you add animations to elements with a simple sentence-like syntax.

6️⃣ Animista – CSS animations on demand

7️⃣ Tachyons Animate – Tachyons is an atomic CSS library packed with utility classes, so you design anything by adding the classes you need.

8️⃣ Sequence.js – Sequence.js is a JavaScript library providing a responsive CSS framework for building sliders, presentations, banners and other step-based interfaces.

9️⃣ Infinite – These animations, such as spins and pulses, are built to run and repeat forever.

🔟 OBNOXIOUS.CSS – Animations for the strong of heart and the weak of mind

1️⃣1️⃣ MOTION UI – A Sass library for building flexible CSS transitions and animations.

1️⃣2️⃣ Keyframes.app – A graphical interface for generating custom keyframe CSS animations.

1️⃣3️⃣ AnimXYZ – AnimXYZ helps you create, customise and compose animations for your website. Built for Vue, React, SCSS and CSS.

1️⃣4️⃣ Whirl – CSS loading animations with a minimum of effort!

1️⃣5️⃣ Hamburgers – Hamburgers is a collection of tasty animated hamburger icons in CSS. The source also ships as a Sass library. It is modular and customisable, so cook your own.