Guides · · Maxwell Prehoda
13 Best CSS Animation Libraries in 2026, With Licenses and Maintenance Checked
For most projects the best CSS animation library is the smallest one that does the job: Animate.css for drop-in entrance and attention classes, Animista when you want to tune one animation and copy only that, Open Props or AnimXYZ if you want modern custom-property tokens, and plain CSS from a snippet directory when you need one effect, not a framework.
Several long-time favorites have not shipped a release in years, and some licenses are not plain MIT. So for every entry below we checked the license, the GitHub activity date and how it handles prefers-reduced-motion, as of November 2026. Pure CSS versions of each library's signature effect play live from our directory.
1. Animate.css: Best for drop-in entrance and attention classes
Platform: CSS, Hippocratic License 2.1, v4.1.1
The most popular CSS animation library by a wide margin, with about 83,000 GitHub stars. Add animate__animated and a name like animate__bounce and it plays. Version 4 moved timing into custom properties (--animate-duration, --animate-delay, --animate-repeat) and added utility classes for delays (animate__delay-2s to 5s), speed (animate__faster to animate__slower) and repeats.
It respects prefers-reduced-motion out of the box, and its docs are honest about use: animate meaningfully, avoid infinite loops and large elements, and remember the default fill mode is both. The page lists around 85 animations, from fades and slides to attention seekers like tada, jello and heartBeat.
Our Tada below is a pure CSS take on one of those classic attention seekers, one keyframe with no library.
Watch out for: The latest release, v4.1.1, dates from September 2020, and the license is the Hippocratic License 2.1 rather than MIT. Some legal teams need to review it before commercial use.
2. Animista: Best for tuning one animation and copying only that CSS
Platform: Web app, generated CSS under the FreeBSD license
Animista, made by Ana Travas with Sergej on the JavaScript, is a playground rather than a stylesheet you install. Pick an animation, adjust duration, timing function, delay, iteration count, direction, fill mode and steps, watch it update, then copy or download the generated keyframes, minified and autoprefixed if you like.
Its best feature is how it avoids bloat: add animations to a favourites list and the download contains only those. Groups are organized by what they animate, such as box, text, letters, background gradients, cards, cubes and SVG logos.
It is the right tool when you know roughly what you want and need the exact keyframes, not 80 classes you will never use.
Watch out for: Check whether the CSS you copy handles reduced motion. If it does not, wrap it in @media (prefers-reduced-motion: no-preference) before shipping.
3. Open Props animations and easings: Best for design-token style motion in a modern CSS codebase
Platform: CSS custom properties, MIT, by Adam Argyle
Open Props is a set of CSS custom properties, and its motion part is two things. Animations ship as ready values like --animation-fade-in, --animation-shake-x, --animation-spin and --animation-ping, so you write animation: var(--animation-fade-in). Easings come as tokens: --ease-1 to --ease-5, plus families like --ease-spring-1 to 5, --ease-elastic-out-1 to 5 and --ease-bounce-1 to 5.
You can import only the animations file, and the project is actively maintained (its repo was updated in October 2026). Its examples wrap motion in a custom media query, @media (--motionOK), that matches prefers-reduced-motion: no-preference.
Our Elastic Spring Animation below shows the kind of curve the spring tokens give you, built with a linear() easing sampled from a real spring.
Watch out for: --ease-elastic and --ease-squish are deprecated aliases due to be removed in v2. Use the numbered families so an upgrade does not break your motion.
4. AnimXYZ: Best for composing entrances and staggers without writing keyframes
Platform: CSS variables + Vue and React integrations, MIT
AnimXYZ builds animations from words. Put xyz="fade small up" on an element and it fades in while scaling up and rising; tune it with variables like --xyz-translate-y. Lists can stagger forward or in reverse, and nested children can animate in sync with their parents.
The base is about 3.11 KB, or about 12 KB with the utilities, it has Vue and React integrations, and animations are disabled automatically when the OS or browser reduced-motion setting is on. Its repo was updated in October 2026.
Our Staggered List Entrance below does the stagger part in plain CSS, with each row's index in a --i custom property.
Watch out for: The word-based API is lovely until you need a specific curve or a step it does not have. For hand-tuned motion, you will end up writing keyframes anyway.
5. Transition.css: Best for clip-path reveals: wipes, circles and diamonds
Platform: CSS, Apache 2.0, by Adam Argyle
Transition.css does one thing: element transitions with clip-path. Set an attribute like transition-style="in:wipe:right" and the element is revealed by a wipe; the families are circle, square, diamond, polygon, wipe and custom.
Clip-path reveals feel more editorial than fades, and they are cheap for the browser because nothing is resized. They suit image reveals, section transitions and modal entrances.
Our Circle Reveal below is a pure CSS version of the circle family: a clip-path circle that grows from the center like a camera iris.
Watch out for: Its repo was last updated in June 2025, so treat it as finished rather than evolving. Because it is small, copying the few transitions you need into your own CSS is a safe option.
6. Hover.css: Best for a big menu of button and link hover effects
Platform: CSS, Sass, LESS; MIT for personal/open source
Ian Lunn's Hover.css is a collection of roughly 110 hover effects in seven groups: 2D transitions, background transitions, icons, border transitions, shadow and glow transitions, speech bubbles and curls. It comes as CSS, Sass and LESS, so you can import only the effects you use.
It remains a useful catalog of hover ideas, with names like grow, pulse, bob and buzz that many developers still use as shorthand.
Our Buzz Out Hover Effect below is a pure CSS take on the buzz idea: quick shifts and twists that fade out over three quarters of a second.
Watch out for: It is MIT only for personal and open source use; commercial projects need a paid license from Ian Lunn Design. The repo's last push was October 2023.
7. Magic CSS: Best for theatrical entrances and exits
Platform: CSS, MIT, about 3.1 KB gzipped
Magic is a set of showier animations than Animate.css: add magictime plus a name like puffIn, openDownLeft, tinLeftIn, bombRightOut, boingInUp or spaceInLeft. The groups (Magic Effects, Bling, Perspective, Rotate, Slide, Math, Tin, Bomb, Boing, On the Space) tell you the tone.
At about 3.1 KB gzipped it is cheap to include, and the default 1 s duration can be changed on .magictime for all animations or per effect.
Our Puff In below is a pure CSS version of the puff idea: it starts oversized and blurred, then collapses into focus.
Watch out for: The repo has not been pushed since August 2022. It does switch .magictime animations off under prefers-reduced-motion and for print, but these are big movements, so use them sparingly.
8. CSShake: Best for error shakes and playful jitters
Platform: CSS, MIT
CSShake is only shakes, in many flavors: shake, shake-hard, shake-slow, shake-little, shake-horizontal, shake-vertical, shake-rotate, shake-opacity, shake-crazy and shake-chunk. Modifiers control when: shake-constant runs continuously, shake-trigger on a parent launches shakes on its children, and shake-freeze stops the motion on hover.
A short horizontal shake is still one of the clearest ways to say "that did not work" on a login or form field.
Our Vibrate below is a restrained pure CSS version: two short buzzes and a pause, a fraction of an em of travel.
Watch out for: Constant shaking is a reduced-motion problem and an annoyance for everyone else. Use one short shake on an event, never shake-constant on content people read.
9. AOS (Animate On Scroll): Best for scroll reveals on sites that must support old browsers
Platform: CSS + JavaScript, MIT
AOS made scroll reveals a one-attribute job: data-aos="fade-up" plus AOS.init(). Attributes like data-aos-duration, data-aos-easing, data-aos-offset, data-aos-delay and data-aos-anchor tune each element, and the animation set covers fades, flips and zooms. It has about 28,000 GitHub stars.
It still works and is everywhere in templates, but scroll reveals no longer need JavaScript in modern browsers: CSS animation-timeline: view() ties keyframes to scroll position directly.
If you want this without a library, our Fade In On Scroll below does it in pure CSS with animation-timeline: view().
Watch out for: The stable line is 2.3.x and version 3 has sat in beta (3.0.0-beta.6) for years, with the last push in March 2024. Plan for it to stay as it is.
10. SpinKit: Best for classic loading spinners in pure CSS
Platform: CSS, MIT, by Tobias Ahlin
Tobias Ahlin's SpinKit is the reference set of CSS spinners: 12 loaders, each a small div structure animated with CSS and no JavaScript. Designs like the folding cube, the chasing dots and the cube grid defined what a CSS loader looks like for a decade, and the repo has about 19,000 stars.
It is a good choice when you want a familiar, neutral spinner and nothing else.
Our Folding Cube Loader below is our pure CSS version of the SpinKit classic, built from rotateX on four tiles.
Watch out for: The last push was August 2020 and spinkit.css has no reduced-motion rule. It does expose --sk-size and --sk-color; add an accessible label and a reduced-motion state yourself.
11. Motion (when CSS is not enough): Best for springs, gestures, layout and exit animations
Platform: JavaScript, React and Vue; free, open source
Not a CSS library, but the honest next step when CSS runs out. Motion, previously Framer Motion, works with plain JavaScript, React and Vue, and starts at 3.2 KB with its mini animate function. The site says most animations run on the browser's own animation engine, and scroll effects use the native ScrollTimeline where possible.
Reach for it when you need things CSS cannot express well: springs that respond to velocity, drag and gesture-driven motion, shared layout animations and exit animations for elements leaving the DOM.
If all you need is a hover or an entrance, keep it in CSS.
Watch out for: Some examples and components are Motion+ exclusives, a paid tier. Check which parts you are copying before you build on them.
12. Our Motions snippet directory: Best for one specific effect, copy-paste, no dependency
Platform: Motions directory, free, HTML + CSS Ours
Not a library you install, which is the point. Our directories hold about 1,800 copy-paste HTML and CSS animations across keyframes, loaders, hover effects, text, buttons and more. Every snippet is pure CSS with no JavaScript, ships with a prefers-reduced-motion guard, and exposes two custom properties for colour and size.
You take only the CSS for the effect you need, so there is no bundle to ship and no release cycle to watch. The Jello below is one of the attention seekers people usually install Animate.css for.
Watch out for: A directory gives you individual effects, not a consistent motion system. Set your own duration and easing tokens and adjust copied snippets to match them.
13. Our catalog inside Claude Code: Best for letting your coding agent pick and paste the animation
Platform: Motions for Claude Code, Pro plan Ours
If you build with Claude Code, Motions for Claude Code connects it to the whole catalog, so it can search the snippets and motion prompts and drop the real code into your project instead of inventing keyframes from memory.
It is the library model turned around: rather than installing 80 animations to use three, the agent fetches the three you need, already guarded for reduced motion.
Watch out for: Review what the agent adds like any other code, and keep durations consistent with the rest of your interface.
How to choose a CSS animation library
Answer these before you npm install anything.
Match it to how many effects you need
One or two effects: copy CSS from Animista or a snippet directory, with no dependency. A consistent set of entrances across a site: Animate.css or AnimXYZ. A token-based system: Open Props. Springs, gestures and exits: Motion. Installing a library for one bounce is the most common mistake.
Match it to your license and maintenance needs
Check before you ship. Animate.css uses the Hippocratic License 2.1, Hover.css needs a paid license for commercial use, and Animista's generated CSS is FreeBSD. Several classics (SpinKit, Magic, AOS) have not had a release in years; that is fine for CSS that already works, but do not expect fixes.
Match it to everyone who will see it
Animate.css, AnimXYZ and Magic handle prefers-reduced-motion for you; Open Props shows how with a custom media query; others, like CSShake, leave it to you. Whatever you pick, wrap motion in a reduced-motion check, avoid infinite loops on content, and stick to transform and opacity where you can.
Pick the smallest thing that works
Write down the three animations your project actually needs. If a library covers all three and its license works for you, use it. If not, copy those three as plain CSS and own them.
Browse the keyframe directory for copy-paste versions, or let Claude Code fetch them for you from the catalog.
Write a tiny CSS animation kit for my site with three classes: .enter-up, .attention and .exit-fade. .enter-up rises 12 px and fades in over 320 ms with cubic-bezier(0.22, 1, 0.36, 1); .attention is a single 600 ms tada-style wiggle; .exit-fade fades out in 180 ms with ease-in. Expose --motion-duration-scale so I can speed all of them up or slow them down. Wrap everything so it only runs under prefers-reduced-motion: no-preference.
Use the catalog in Claude Code →
Common questions
What is the most popular CSS animation library?
Animate.css, with about 83,000 GitHub stars. Add animate__animated and an animation class such as animate__fadeInUp. It respects prefers-reduced-motion, but its last release was v4.1.1 in September 2020 and it uses the Hippocratic License rather than MIT.
Is Animate.css still maintained?
It still works and is widely used, but there has been no new release since v4.1.1 in September 2020, and the repository was last pushed in July 2024. For stable CSS animations that is usually fine; just do not expect new features.
Do I need a library for CSS animations?
Often not. Modern CSS has keyframes, transitions, custom properties, @property, linear() easing and scroll-driven animations built in. A library helps when you want many consistent effects or a shared vocabulary; for a few effects, copied CSS is lighter.
What is a good AOS alternative?
In modern browsers, CSS scroll-driven animations with animation-timeline: view() replace most AOS reveals with no JavaScript. For more control, Motion's scroll functions use the native ScrollTimeline where possible.
Which CSS animation libraries respect reduced motion?
Animate.css, AnimXYZ and Magic turn their animations off automatically when the user asks for reduced motion. Open Props demonstrates a custom media query for it. CSShake's stylesheet has no such rule, and with code copied from generators like Animista you should check and add the media query yourself.