31 CSS Animation Libraries + Which One to Install

Licensing is the part of CSS animation libraries that gets the least attention. Hover.css requires a paid license for commercial work, while the Animate.css repository names the Hippocratic License, per each project’s own documentation.

Front-end teams use these libraries for entrance, hover, attention and scroll-reveal effects, mostly so they don’t have to write keyframes by hand.

How does a CSS animations library work?

Having a little animation blueprint on hand? Golden! Slap this sheet on, throw in some of their premade moves, and watch the magic unfold.

The stylesheet ships ready-made @keyframes rules and utility classes, and an element animates as soon as it gets a class name.

The browser’s rendering engine plays the effect. No script drives the motion.

Writing a CSS animation by hand means one keyframes block plus one rule that points to it, for every effect. A library ships both pieces already written, and you pick the effects you want.

Under every effect sits a set of CSS keyframes. MDN Web Docs describes them as the element’s state at percentages from 0% to 100%, with from and to as aliases for the two ends.

The keyframe rule holds the visual states, such as opacity, translate, rotate or scale. Two classes handle the wiring. One points to the rule through animation-name, and the other (the base class) sets the shared timing defaults.

Animate.css follows this split. The animate__animated class carries the 1s default duration, and a second class such as animate__bounce names the effect (Animate.css documentation, version 4.1.1 as of October 2026).

MDN lists the properties that control a run, from animation-name and animation-duration through animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-timing-function and animation-play-state.

Fill mode controls how the element looks before and after a run. Animate.css defaults it to both, so an exit effect such as fadeOut stays hidden once it ends instead of snapping back.

Moving or fading an element is cheap for the browser, as long as the right properties change. MDN puts geometry and position properties such as left, margin-left, border-width, max-width and font-size in the group that triggers style recalculation, layout and repaint. Transform and opacity, which get their own layer, sit in the cheapest group.

Which CSS animations libraries are worth using?

Enter the playground of dreams with AnimXYZ. Mix it, layer it, and be the animation maestro you always wanted to be.

Animate.css covers most entrance, exit and attention effects, so it’s the default pick. Animista makes sense when you only need a few effects. Hover.css is for hover states, AOS is for scroll reveals, and csshake shakes things.

Trigger type is the first filter. After that, file size and license decide it.

Animate.css

Hey, web folks! Ever felt the need to dazzle your site? Animate.css is that cool CSS animations library that’s been rocking the scene since 2013. Think of it as your go-to wardrobe for web bling. Whether you’re jazzing up home pages or dropping sassy hints, it’s got your back.

Count the class names on its documentation page and you get 97 effects in 16 groups. Attention seekers (bounce, flash, pulse) are in there, along with fading, flipping, zooming and sliding entrances and exits.

The 4.1.1 minified build weighs 71,750 bytes and the raw file 95,374 bytes uncompressed, per jsDelivr’s package listing. One effect on its own is tiny. The fadeIn source file is 118 bytes.

The license is listed differently depending on where you look. The npm package metadata, as shown by jsDelivr, lists MIT, while the project repository README and the documentation site name the Hippocratic License 2.1, and so does the stylesheet header. Read the LICENSE file for the exact version you ship, especially on client work.

The same class pattern covers all 97 effects, which makes it easy to remember. Duration, delay and repeat are CSS variables, and a reduced-motion rule has been included since version 3.7.0.

The downsides are real, though. The full file loads every effect even if you use two. Custom builds need a cloned repository, not node_modules, and the license wording differs between copies, which is annoying.

Animista

Here’s the deal. Animista is both a generator and a library. It’s like a buffet of animations, and guess what? You get to take the recipes home!

Animista ships no library file.

You pick effects in the browser, adjust easing, delay, duration and fill mode, then copy or download only the CSS you chose. Minification and autoprefixer are on by default, and the easing menu includes Penner equations such as easeOutBack next to the native keywords.

Generated code is free for personal and commercial use under the FreeBSD license, according to the Animista site.

A CSS animation generator is the quicker route when you need a single custom effect instead of a catalog.

The download button relies on the HTML5 FileSystem API and works in Chrome only. Other browsers get a copy-to-clipboard option.

The payoff is the smallest payload for a handful of effects. The site is labeled beta, though, and its mobile version is unavailable.

Hover.css

Oh-la-la! Hover.css brings the charm to your buttons and UI stuff. Those 2D transitions? Utterly smitten!

Hover.css is the pick when the whole job is hover states.

Its hover effects fire on :hover, :focus and :active, as the Grow example in the README shows. Every class has carried the hvr- prefix since version 2.0.0.

For a few effects, the README recommends copying them into your own stylesheet so visitors skip the full download.

Licensing is where it gets awkward. Personal and open source use falls under MIT, but commercial use needs a paid license, required from version 2.2.0 (24 March 2017). The commercial tier names a website sold to a client as its example.

Free on your own projects, paid on client work.

csshake

Jiggle, wiggle, and make ’em giggle. CSShake is all about the fun vibes! Why stay static when you can shake it up?

csshake does one job.

Add the shake base class, then pick a modifier from shake-hard, shake-slow, shake-little, shake-horizontal, shake-vertical, shake-rotate, shake-opacity and shake-crazy.

The effect is hover-triggered by default. The shake-constant class runs it continuously instead of only on hover, and shake-freeze freezes it on hover.

Each variant also ships as its own file, such as csshake-little.css, and the package is on npm, Bower and cdnjs under an MIT license.

It’s single purpose, and the README changelog ends at version 1.5.0 (October 5, 2015), so don’t expect updates.

AOS

AOS reveals elements as they scroll into view, and it is the only library in this list that needs JavaScript.

It uses the MIT license, ships built-in fade, flip, slide and zoom families, and gives you per-element control through data attributes.

The default-branch README documents the aos@next tag and points to a separate page for the last stable release, version 2, so it takes a minute to work out what to install. Its custom-animation recipe builds on CSS transitions rather than keyframes.

How to install a CSS animations library

A CDN link gets you started fastest. In a bundled project, npm is the better fit, and a self-hosted file makes sense when you want control over exactly which bytes ship.

The steps below use Animate.css 4.1.1, the version its documentation lists as of October 2026.

1. Choose the delivery method: CDN, npm or a downloaded file.
2. For a CDN, add a stylesheet link in the head that points to https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css.
3. For npm, run npm install animate.css –save and import ‘animate.css’ in the bundler entry file.
4. Add the base class and an effect class to an element, prefix included: animate__animated animate__bounce.
5. Confirm the element is block or inline-block, because inline elements do not animate reliably.

Choosing between CDN, npm and a self-hosted file

A CDN needs no build step. Animate.css documents cdnjs, and jsDelivr also serves the npm package with animate.min.css as its default file.

With npm, the version sits in package.json and the stylesheet joins your bundle. The documentation flags that its Yarn install needs bundling tooling such as Webpack or Parcel, so a plain HTML page is better served by the CDN link.

Self-hosting means you own the version and the exact file.

Custom builds shrink that file. Clone the Animate.css repository, delete the @import lines for effects you skip in source/animate.css, and run npm start to generate animate.css, animate.min.css and animate.compat.css.

If you copy single effects by hand, as the Hover.css README recommends, a CSS minifier produces the compressed version for production.

Upgrading from version 3

Version 4 added the animate__ prefix to every class, so a direct migration is impossible.

The animate.compat.css file keeps the unprefixed names of version 3. Switch the bundler import to animate.compat.css, or the CDN link to the 4.0.0 compat file.

New projects should use the prefixed build. The maintainers say they might discontinue the compat file in a later version.

How to trigger and customize animations

Add the effect class from a click handler, a hover rule or a scroll observer, then override –animate-duration, –animate-delay and –animate-repeat to change the timing. A variable set on :root changes every animation, and a variable set on one selector changes only that element.

Class toggling and hover

element.classList.add(‘animate__animated’, ‘animate__bounceOutLeft’) starts the effect immediately.

To detect the end, listen for animationend. MDN notes that the final loop fires animationend, not animationiteration. Then remove both classes inside the handler. A class that is already on the element starts nothing new, so replays need the removal.

The Animate.css documentation includes a short helper, animateCSS(element, animation), that adds the classes, waits for animationend, removes them and returns a Promise.

Hover triggers need no script. Hover.css responds to :hover, :focus and :active, and csshake shakes on hover by default, with shake-constant for continuous motion and shake-freeze to stop it on hover.

Scroll triggers

AOS watches scroll position and adds its animate class when an element reaches the trigger point. Call AOS.init() once, then mark elements with data-aos=”fade-up” (AOS README).

These data attributes override the global settings for a single element:

• data-aos-offset
• data-aos-delay
• data-aos-duration
• data-aos-easing
• data-aos-once

Duration and delay accept values from 50 to 3000 ms in 50 ms steps.

AOS is one of several ways of animating on scroll with CSS, and it can also drive a keyframe pack.

To drive Animate.css from AOS, set useClassNames to true, initClassName to false and animatedClassName to the base class, then put the effect name in data-aos. The README example uses version 3 names, so swap in animate__animated and the prefixed effect names for version 4.

Animate.css defines no hidden starting state. Add a rule that sets [data-aos] to visibility: hidden and reverses it once the animated class lands, as the AOS README advises.

Timing overrides with CSS variables

Animate.css 4 defines custom properties for duration, delay and repeat, and the stylesheet sets each default to 1, which means a 1s duration, a 1s delay and one repeat.

Set a variable on :root to change every animation, or on one selector to change one. A one-liner, document.documentElement.style.setProperty(‘–animate-duration’, ‘2s’), doubles the time of all animations on the page.

Effects shorter than 1s keep their ratio, because the library multiplies the variable with calc().

There are limits. The animate__infinite class uses no variable, so –animate-repeat does nothing to it, and the documentation advises setting –animate-repeat on the element, not globally. Gaps between repeats are impossible in pure CSS and need JavaScript.

Why is an animation not playing?

An animation that does not play usually has no usable duration, a variable the stylesheet never reads, an override with higher specificity, or an OS reduce-motion setting that shortens every effect to 1ms.

Duration is the first suspect. MDN lists 0s as the initial animation-duration, and a value of 0s means the effect never runs. The base class supplies one, but direct @keyframes use needs your own, as the Animate.css documentation warns.

A wrong variable name is the sneaky one. One line in the Animate.css documentation spells the variable –animation-duration, while the stylesheet defines and reads –animate-duration. The misspelled version changes nothing.

Competing declarations come next. A rule that sets animation-duration straight on the element beats the variable when it has higher specificity or comes later in the cascade. Move the value into the variable instead.

And if reduce motion is on at the OS level, the effect finishes in 1ms, the element jumps to its end state and nothing seems to play.

Chrome DevTools has an Animations panel that captures CSS animations while it is open, so trigger the effect with the panel visible. Edits to @keyframes in the Styles pane show up in the panel right away, according to Chrome for Developers.

Layout problems cause the rest, per the Animate.css gotchas.

• If slide or bounce effects add horizontal scrollbars, set overflow: hidden on the parent of the animated element
• If glitches spread across the whole page, the effect sits on html or body, so wrap the page content in one element and animate that

Does a CSS animations library slow a page down?

Not by itself. Runtime cost depends on which properties each effect changes. Changes to transform and opacity run on the compositor, while anything that triggers layout or paint runs on the main thread.

Which properties stay on the compositor

Chrome’s Lighthouse documentation defines a non-composited animation as any animation that triggers the Style, Layout or Paint step of the rendering pipeline. Those animations can look janky on low-end phones or while the main thread is busy.

web.dev’s compositor guide names transform and opacity as the only two properties the compositor handles alone. That guide was last updated in March 2015, so treat the list as dated and let the audit decide.

Lighthouse reports each DOM node with a non-composited animation, plus the failure reason, which turns the check into a per-element to-do list.

Layers and fill mode

Animate.css defaults animation-fill-mode to both. MDN states that a forwards fill makes the animated properties behave as if will-change were set, and an element that gained a stacking context during the run keeps it afterward.

web.dev warns that every promoted layer costs memory and GPU texture bandwidth, and on devices with limited memory the cost can outweigh the gain. Put together, finished effects that keep their classes also keep that promoted state.

So remove the classes on animationend for entrance and attention effects, since their end state matches the element’s normal style. Exit effects are the exception and stay in place until the element leaves the DOM.

Layout shift and Core Web Vitals

Lighthouse excludes composited animations from Cumulative Layout Shift, while non-composited ones can add to it because they move elements the algorithm measures.

Spendesk’s engineering team cleared a CLS flag on a marketing-site banner by replacing an animated top property with transform: translateY(). They describe the original flag as a false positive that exposed a real performance problem.

web.dev gives the same rule in two lines: use transform: scale() instead of changing height and width, and transform: translate() instead of top, right, bottom or left.

On the numbers, web.dev puts a good CLS at 0.1 or less at the 75th percentile of page loads, and anything above 0.25 counts as poor. Shifts within 500 ms of a click, tap or keypress are excluded, while scrolls, drags and pinch gestures do not count as recent input.

That exclusion window matters for scroll reveals. A scroll-triggered effect that moves an element through top, margin or height counts toward CLS, and one that uses transform does not.

Do CSS animations libraries respect reduced motion and work in every browser?

Animate.css does, through a built-in prefers-reduced-motion rule. Neither the Hover.css nor the csshake README mentions an equivalent, so those two need your own rule, and keyframe animations themselves run in every current major browser.

What the Animate.css rule does

The documentation and the stylesheet describe it differently. The accessibility page says reduced motion turns off CSS transitions, and the best-practices page says the query disables animations.

The stylesheet itself, on the project’s main branch, sets animation-duration and transition-duration to 1ms with !important inside @media print, (prefers-reduced-motion: reduce).

The effect still runs, for 1ms. Fill mode is both, so the element lands on its end state at once, and animationend still fires for any script waiting on it.

W3C lists the prefers-reduced-motion media query as technique C39 for preventing motion. The same rule applies to effects you write yourself.

Libraries without a rule

The other libraries in this comparison need a rule from you.

For Hover.css, wrap the hover classes in your own media query. The same fix works for csshake, where the shake-constant classes are the main risk. AOS has a disable setting that accepts a function, so return window.matchMedia(‘(prefers-reduced-motion: reduce)’).matches from it.

To test, open the Command Menu in Chromium DevTools, run Emulate CSS prefers-reduced-motion and reload, as Microsoft’s Edge DevTools documentation describes.

WCAG criteria for library effects

WCAG 2.2 has criteria that apply to motion from a library.

SC 2.2.2 (Level A) requires a pause, stop or hide mechanism for moving content that starts automatically, lasts more than five seconds and sits beside other content, per W3C.

SC 2.3.3 (Level AAA) lets users disable motion triggered by interaction unless the motion is needed to convey information, and W3C names parallax scrolling as a frequent offender. Hover or scroll effects with no way to pause can fail both.

In practice, an animate__infinite pulse that starts on load runs past five seconds and needs a pause control. Motion belongs in any web accessibility review next to color and keyboard checks.

Browser support

The web-features data lists CSS animations as Baseline Widely available, so Chrome, Edge, Firefox and Safari run keyframe libraries without polyfills.

Animate.css 4 also writes a fixed fallback value before each variable-based declaration, so a browser without custom property support still gets a duration.

For newer properties, check the compatibility tables on MDN or Can I use before shipping.

When is a CSS animations library the wrong choice?

Keep a CSS library for a few entrance, hover or attention effects. Move to a JavaScript library when effects need sequencing, reversal or runtime control, and to native scroll timelines when motion must follow scroll position.

A CSS class pack needs no runtime script, and the effects live in markup. The browser also decides when to render frames and can drop frames if needed, per MDN. What you give up is sequencing, reversal and mid-run control.

A JavaScript library gives you timelines, stagger, pause and reverse, plus one API for scroll, layout and gesture effects. The price is a script to load and its own reduced-motion checks.

For one or two effects, copy the keyframes by hand and skip the library. A library earns its place when the same classes repeat across templates.

Sequencing and playback control

The Web Animations API is the step up that needs no download. Element.animate(keyframes, options) returns an Animation object with pause(), reverse() and a finished promise, and MDN lists the interface as Baseline Widely available.

GSAP is free, including the former paid plugins, with commercial use covered by the standard “no charge” license. Webflow acquired GreenSock in fall 2024 and then made the whole toolset free.

The standard license does carve out solutions that compete with Webflow’s visual animation tools, so read its Permitted Uses clause before building an animation editor.

Anime.js version 4 is modular (animate, createTimeline, stagger, onScroll) and, according to its README, free and funded by sponsors.

Component state in React

A CSS exit effect only plays while the element is still in the DOM. On unmount, delay removal until animationend, which the promise-returning helper in the Animate.css documentation can handle.

Motion (formerly Framer Motion) covers this natively. The MIT-licensed library adds layout, exit and gesture animation for React, running on the Web Animations API and ScrollTimeline where it can.

Scroll-linked effects

Native scroll-driven animations (animation-timeline with scroll() and view()) shipped in Chrome and Edge 115 in July 2023 and in Safari 26 on September 15, 2025, according to the web-platform-dx web-features data as of October 2026.

The same data lists Firefox as not supported, with a positive standards position, and marks the feature Limited availability and part of Interop 2026. Wrap the rules in @supports (animation-timeline: view()) so unsupported browsers show the content without motion.

Scroll-linked effects such as parallax scrolling are the strongest case for the native route. Until Firefox ships it, an AOS-style library stays the cross-browser option for plain reveals.

CSS Animation Libraries To Check Out

Izmir’s Sassy Hover Sass

Rolling out with some hover glam? Izmir Hover Effects is the mini magic you need! It’s like having an artist’s palette but for your website. Mix, match, and strut – the canvas is yours.

CSS Wand

All aboard the magic train! Wave your wand with CSS Gradient. It’s not just colors; it’s a whole vibe.

Magic Animations

Gotta say, Magic Animations? Super wild. From quirky twirls to majestic sweeps, it’s the fancy footwear of the CSS animations library realm. Bonus points? That demo is fire!

CATTO-CSS

Cats and CSS? Heck yeah! CATTO-CSS has got that playful bounce. It’s segmented, sleek, and utterly fab.

Pretty-checkbox.css

Who thought checkboxes could slay? With Pretty-checkbox.css, they do! Pure, chic, and just what the web doctor ordered.

Motus CSS

It’s a scroll? It’s an animation? It’s Motus CSS! This dude mimics CSS keyframes while you scroll. Super quirky, right?

VOV.CSS

Looking for zesty zings? VOV.CSS is the pocket-sized power punch for animations. Little sparks, big impact.

Micron.js

It’s all in the details! Micron is that whispered secret, that wink across the room. Small moves, big moods..

Loading.io

Honestly, I’ve always said, if you’re gonna make people wait, give ’em something cool to look at! Loading.io is that stylish relative of yours who always has the freshest kicks. They’re bringing those rad loading vibes.

Animation Library by Later.com

Wanna bring some groove to your site? This CSS animations library is pure and straightforward. Drop in the CSS or SCSS, and let the moves take the stage.

Pure.css

Talk about being minimalist and neat. Pure.css is that friend who has just the right thing for every occasion. Tables, buttons, you name it!

WOAH.CSS

For those who love to march to their own drum, WOAH.CSS is the rebel of the CSS animations library world. Let’s get eccentric!

Balloon.css

Tooltips without the fuss of JavaScript? Balloon.css makes it as easy as tying a shoe. A touch here, a sprinkle there, and voilà!

Picnic CSS

Sleek, stylish, and oh-so-lightweight. Picnic CSS is the picnic basket full of design goodies you didn’t know you needed.

pattern.css

Got some blank spaces? Pattern.css is like the wallpaper for your site. Pure CSS and pure awesome!

Infinite CSS Animations

Endless loops? INFINITE’s got your back. It’s this cool collection of endless CSS animations you can sprinkle onto your stuff.

Animatopy

From bouncing to jiggling, Animatopy is like the dance floor for CSS animations. So many moves, so little time!

REPAINTLESS.CSS

Ever wanted animations without slowing stuff down? REPAINTLESS.CSS is the real MVP. It’s all about being smooth and efficient.

Whirl

Whirl isn’t just a spin; it’s a tornado of CSS loading animations. With 106+ whirls and counting, it’s a lifesaver for folks like us.

DYNAMIC.CSS

Animations are like the heartbeat of a webpage. And Dynamic.css? It’s like a whole new energy drink. Great for jazzing up those web elements.

Animated Hamburger Menus

In the world of mobile navs, Hamburgers is the chef. Serving up delicious CSS hamburger animations. Yum!

WICKEDCSS

Ever wanted animations that pop and sizzle? WickedCSS might be small, but dang, it’s fierce! It’s like the hot sauce in the CSS animations library world.

Three Dots

When simple meets stylish, you get Three Dots. Minimal CSS loading animations with just one element.

MOTION UI

Level up! MOTION UI isn’t just any CSS animations library. It’s a powerhouse built with Sass. Let the fun begin!

CSSANIMATION.IO

Hunting for the perfect move? Look no further. cssanimation.io is like the mega-mall of animations. If it’s not here, it’s probably not anywhere.

CSS Animations Library FAQ

What is the difference between a CSS transition and a CSS animation?

Transitions run between two states, and only when a property changes. A keyframes animation needs no trigger like that. It can run on its own, loop and pass through several steps.

Libraries such as Animate.css ship keyframes, which is why adding a class alone starts an effect.

Can I use more than one CSS animations library on the same page?

Yes, with one name check. Animate.css 4 and Hover.css prefix their classes (animate__ and hvr-), and AOS works through data attributes.

The csshake classes are plain, unprefixed shake classes, so they are the likeliest to clash with your own CSS.

Can I use Animate.css with Tailwind CSS?

Yes. Animate.css prefixes its classes with animate__, so they do not clash with Tailwind’s animate-* utilities.

Tailwind already ships animate-spin, animate-ping, animate-pulse and animate-bounce, and custom effects go in an @theme block as –animate-* variables, per the Tailwind documentation.

How do I pause or stop a CSS animation?

Set animation-play-state to paused. MDN notes that resuming picks up where the effect stopped, not from the start.

To end an effect for good, remove the effect class and the element returns to its normal style.

Can a CSS animation start from display: none?

Yes for entry effects, because an effect class starts running when the element renders. Remove display: none and add the class in the same step.

Exits need more care, since display flips instantly. A transition that includes display with allow-discrete, plus an entry state in @starting-style, handles entry and exit, and the web-platform-dx web-features data lists the pair as Baseline Newly available since Firefox 129 (August 2024).

Does a CSS animations library affect SEO?

Only indirectly. Google’s documentation says Core Web Vitals are used by its ranking systems, and animations reach them through layout shift.

The same page states that good scores do not guarantee rankings.

What a CSS Animations Library Costs to Maintain

A CSS animations library costs little to maintain when the version is pinned and the audit is routine. The real expense is code that no upstream project updates.

The upkeep runs in a fixed order.

• Pin the exact version, so every later check has a fixed baseline
• Add the reduced-motion override and test it with DevTools emulation
• Re-run the Lighthouse non-composited animations audit after each upgrade

Treat abandoned libraries as your own code. The csshake changelog stops at version 1.5.0, 11 years before this October 2026 check, so copying its rules into your stylesheet removes a dependency whose changelog has gone quiet.

Pinning trades upstream fixes for stability. The stylesheet stays predictable, and every upgrade becomes a deliberate task with its own audit.

• Author
• Recent Posts

Bogdan Sandu

Bogdan Sandu specializes in web and graphic design, focusing on creating user-friendly websites, innovative UI kits, and unique fonts.

Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.

Latest posts by Bogdan Sandu (see all)

• What is Backend in Web Development? - September 13, 2026
• What is Frontend Development? - September 11, 2026
• How to Make a Button in Figma: Design Best Practices - September 10, 2026