OSS TanbouOn this page
Overview
Animate.css provides fade, bounce, zoom, attention-seeker, and other animations as CSS classes. No JavaScript API is required; load the stylesheet and add the relevant classes to an element.
Features and best fit
Based on official documentation; not hands-on tested · Content checked:
Key features
Combine animate__animated with an animation class
Use the base animate__animated class together with classes such as animate__bounce or animate__fadeIn to trigger predefined animations.
Choose from many animation families in one stylesheet
The library groups attention, back, bounce, fade, flip, lightSpeed, rotate, slide, zoom, and other presets for reuse across components.
Sources: [3]
Respect prefers-reduced-motion
The README documents support for prefers-reduced-motion so operating-system reduced-motion preferences can disable or reduce animations.
Sources: [2]
Best fit
Fits interfaces that need quick micro-interactions or entry/exit animations
It is useful for prototypes, marketing pages, or existing components where teams want proven keyframes without authoring each animation from scratch.
Sources: [2]
Before adoption
Version 4 class names differ from older v3 examples
The 4.1.1 package uses the animate__ prefix, so older snippets should be migrated rather than copied unchanged.
Sources: [3]
Official sources
- [1]Animate.css repository(2026-10-05)
- [2]Animate.css v4.1.1 README(2026-10-05)
- [3]Animate.css v4.1.1 package metadata(2026-10-05)
- [4]Animate.css v4.1.1 release(2026-10-05)
- [5]Animate.css MIT license(2026-10-05)
Supplemental curator note
Animate.css v4 uses the animate__ prefix. The usual pattern combines animate__animated with an animation-specific class. It supports prefers-reduced-motion, but teams should still decide whether motion is appropriate for each interaction.
Try it in 3 steps
- 1
Install Animate.css 4.1.1 in an isolated project
Pin the stable release in a temporary project without changing an existing codebase.
demo=$(mktemp -d "${TMPDIR:-/tmp}/animate-css.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact animate.css@4.1.1 - 2
Create minimal HTML using animation classes
Combine the v4 base class
animate__animatedwith theanimate__bounceanimation class.printf "%s\n" '<!doctype html>' '<html><head><link rel="stylesheet" href="./node_modules/animate.css/animate.min.css"></head>' '<body><h1 class="animate__animated animate__bounce">Hello</h1></body></html>' > index.html - 3
Verify v4 classes and reduced-motion support
Confirm the package contains prefixed v4 classes and the reduced-motion media query.
grep -q ".animate__animated" node_modules/animate.css/animate.css && grep -q "prefers-reduced-motion" node_modules/animate.css/animate.css
Growth
Growth trends · Last 30 days
82,849 Stars
Trend data is still being collected.
Built with
Categories and tags
Categories
GitHub data
GitHub dataView detailed GitHub data
GitHub Topics
- animation
- css
- css-animations
- stylesheets
Related information
Write a related articleShare a guide or use case for this OSS in Markdown. Articles are published after administrator approval.
Explore next
- CSSTools PostCSS Plugins1,057 Stars
3 shared tag(s) · 1 shared category(s) · Same language
select standard CSS transforms from CSSDB and browser targets and compose them into a PostCSS pipeline
CSS - Bootstrap174,991 Stars
3 shared tag(s) · 1 shared category(s)
Build responsive interfaces from a CSS/Sass grid, utilities, components, and native JavaScript
MDX - Electron123,388 Stars
3 shared tag(s) · 1 shared category(s)
bundle Chromium and Node.js to build desktop applications for three major operating systems with HTML, CSS, and JavaScript
C++ - PostCSS28,974 Stars
3 shared tag(s) · 1 shared category(s)
parse CSS into an AST and compose build-time style processing with JavaScript plugins
TypeScript - Autoprefixer22,211 Stars
3 shared tag(s) · 1 shared category(s)
generate only the vendor prefixes required by Browserslist and Can I Use data
JavaScript - Less17,025 Stars
3 shared tag(s) · 1 shared category(s)
compile stylesheets with variables, mixins, and nesting into standard CSS with lessc
JavaScript
Report incorrect information
Tell us if any listing information is incorrect or outdated.