CSS Animations

28 resources

This category collects ready-made CSS animations and tools for writing your own: libraries like Animate.css, Hover.css, CSShake and Magic Animations, generators such as Animista and Keyframes.app, collections of loaders and spinners, animated hamburger menus, scroll-reveal helpers like AOS, and lightweight JavaScript helpers such as Motion One and AnimXYZ.

Pure CSS animation is enough for most interface motion: hover states, entrance effects, loading indicators and menu toggles. Animista and Keyframes.app are the most practical starting points because you can tune duration and easing, then copy only the keyframes you need instead of loading a whole library. Hamburgers and CSS Loaders cover common UI pieces in a few lines.

Keep motion fast and purposeful. Animate transform and opacity rather than layout properties like width or top so the browser can keep it smooth, keep interface transitions short, and wrap non-essential motion in a prefers-reduced-motion media query. Libraries like OBNOXIOUS.CSS and CSShake are fun for demos but rarely belong in production UI.

Bounce.jsbouncejs.com

Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations

Anime.jsanimejs.com

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects

Magic Animationsminimamente.com

Animations has been one of the most impressive animation libraries available

Zdogzzz.dog

Round, flat, designer-friendly pseudo-3D engine for canvas & SVG

C

CSShakeelrumordelaluz.github.io

CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page

H

Hover.cssianlunn.github.io

Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website

AniJSanijs.github.io

AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure

Animistaanimista.net

CSS Animations On Demand

Tachyons-animateanater/tachyons-animate

Tachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need

Open source137updated 7y ago

Sequence.jssequencejs.com

Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications

I

Infinitetilomitra.github.io

These animations, like rotations and pulses, that are specifically designed to run and repeat forever

OBNOXIOUS.CSStholman.com

Animations for the strong of heart, and weak of mind

MOTION UIzurb.com

A Sass library for creating flexible CSS transitions and animations

K

Keyframes.appkeyframes.app

A graphical user interface for generating custom CSS keyframe animations

thoughtbotthoughtbot.com

CSS Transitions and Transformations for Beginners

SVG Artistasvgartista.net

A useful tool to animate stroke and fill properties in SVG images with plain CSS code

AnimXYZanimxyz.com

AnimXYZ helps you create, customize, and compose animations for your website. Built for Vue, React, SCSS, and CSS

Whirljh3y/whirl

CSS loading animations with minimal effort!

Open source1.8kupdated 3y ago

Hamburgersjonsuh.com

Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger.

CSS Loaders & Spinnerscssloaders.github.io

This is a library having a collection of different types of CSS loaders, spinners

Motion Onemotion.dev

A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance.

pocolocopocoloco.io

Generate dynamic backgrounds for your website

A

AniXadajuly.github.io

Super easy and lightweight css animation library.

A

AOSmichalsnik.github.io

Animate On Scroll Library.

A

Animatopysarthology.github.io

Just-add-water CSS animations snippets

B

Button Interaction Specsjsabutis.github.io

Hover and press effects on one identical button, each with its CSS or JavaScript to copy.

Built on the open bradtraversy/design-resources-for-developers list by its contributors, licensed MIT. Design Resources for Developers is an independent project, not affiliated with the list's maintainers.

About Synced Oct 16, 2026

© 2026 Design Resources for Developers

Esc

Type to search every entry. ↑↓ to move, Enter to open.