Animate.css: one source file, three stylesheets, and main pointing at the unminified one
GitHub describes it as 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.. The repository metadata lists CSS as its primary language. The metadata lists the NOASSERTION license. This article stays within the project description and details documented in the GitHub repository README.
At a glance
- What is it?
- The library is a single PostCSS source that builds into three different CSS files, and the package's main field names the unminified development one. The newest tagged release is 4.1.1 from September 2020 while the last commit to main is dated 2024-07-29, so the code on GitHub and the code in the registry are not the same thing.
- Who is it for?
- Use Animate.css when you want a fixed set of keyframe animations and can live with the animate__ naming scheme, and treat whatever version you install as a 2020 snapshot rather than as the state of the repository. Two things to check before you ship it.
- Can I use it commercially?
- Check first. The repository uses a licence we do not classify automatically, so read its LICENSE file before any commercial use.
- Is it still maintained?
- Probably not. The repository last received commits 26 months ago, on July 29, 2024.
- What is it written in?
- Mainly CSS, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on September 29, 2026, and from our analysis. They are not legal advice.
Editorial analysis
The package main field names the development build, not the minified one
Everything a consumer gets is produced from a single file, source/animate.css, by three PostCSS commands with different environments:
"raw": "npx postcss source/animate.css -o animate.css --no-map --env development",
"prod": "npx postcss source/animate.css -o animate.min.css --no-map --env production",
"compat": "npx postcss source/animate.css -o animate.compat.css --no-map --env compat",The published package metadata points at the first of those outputs:
"main": "animate.css",
"style": "./animate.css",
"prefix": "animate__",Consequence: a bundler that resolves main or style gets the development build, complete with its own comments and formatting, while animate.min.css sits in the package unused. Nobody is stopped from importing that file directly, and nothing warns you that the file you were handed by the resolver is not the one the project minifies.
One source becomes three stylesheets, and which one you get is on you
The development, production and compat builds differ by PostCSS environment rather than by source, and the start script runs all three in sequence. The compat build is the interesting one: autoprefixer is driven by a browserslist of "> 3%" and "last 2 versions", so the vendor prefixes in that file are whatever that share-of-market query selected on the day somebody ran the build.
Consequence: the prefix coverage is frozen at build time and is defined by a market-share threshold rather than by a support policy, so a browser sitting below three percent gets no prefixes and nobody chose that on purpose. It also means a consumer who wants prefixes has to know to import animate.compat.css, because that is not the file main resolves to and the README does not mention the distinction.
The category is baked into every class name, so a rename is a breaking change
The class prefix is not a namespace choice, it is part of the public API. package.json sets animateConfig.prefix to animate__, and the contributing guide gives exactly two rules for a pull request: match the naming convention, which is camelCase categorised under labels such as fades and bounces, and show a demo of the submitted animation in a CodePen. The second rule is the one the file calls important.
Consequence: the category lives inside the identifier, so a class like animate__fadeIn and animate__bounceIn differ only in the word the project chose to group them by, and moving an animation between categories breaks every page that uses it. Gating merges on a human watching a pen also means the throughput of the library is bounded by review attention, and the naming rule is enforced by that review rather than by anything in the build.
The newest release is from 2020 and the last commit is from 2024
Three tags are visible: v4.0.0 on 2020-05-07, v4.1.0 on 2020-05-13 and v4.1.1 on 2020-09-07. The package version in package.json matches that last tag. The last commit to main is dated 2024-07-29, and the repository is not archived, so there is work in the tree that no release has ever carried.
Consequence: installing animate.css from a registry gives you a September 2020 build, while the main branch holds four more years of unversioned changes. Anyone comparing a bug report against main is comparing against code that the published artefact does not contain, and anyone pinning to the newest tag pins to something four years behind the repository. The project also keeps the v3 documentation at a frozen commit hash, which means the v3 and v4 documentation are two separate documents at two separate URLs.
The version script rebuilds the CSS, stages it and pushes tags in one command
The release path is two lifecycle hooks:
"version": "npm-run-all start docs && git add -A docs animate.css animate.min.css animate.compat.css",
"postversion": "git push && git push --tags",Consequence: a version bump regenerates all three stylesheets and the documentation site, force-adds the generated files to the index, and then pushes both the branch and the tags. The generated CSS and the tag therefore reach the remote in the same command with no review step in between, which is convenient for a stylesheet and means the artefact a package manager serves is produced by whatever ran on the maintainer's machine. The surrounding toolchain is of the same vintage, with a .travis.yml file in the root, husky as a prepare hook, and eslint and cssnano floors that date from the release era.
Reduced motion is a media query inside the same file, so nothing is removed
Accessibility is one short section, and it is specific about the mechanism. The library supports the prefers-reduced-motion media query, and on what the file calls currently all the major browsers and operating systems, a user who selects reduce motion in system preferences gets CSS transitions switched off with no work from the site.
Consequence: the guarantee comes from the reader's operating system, not from anything the author of the page chose, and the keyframes are still present in the stylesheet either way. That is the right default and it also means a page cannot opt an individual animation back in for one user, because the switch is global and lives below the stylesheet. The sentence is careful about platform coverage, and it is the only accessibility claim the file makes.
The licence is the Hippocratic License and package.json spells it Hippocratic-2.1
The README states that Animate.css is licensed under the Hippocratic License and links to firstdonoharm.dev, while package.json declares "license": "Hippocratic-2.1" and a separate LICENSE file sits in the root. The repository does not restate any of the terms, and a package manager, a licence scanner and a legal reviewer each end up reading a different string.
Consequence: for a stylesheet that ends up copied into other people's projects, that gap is the whole decision. If you need an MIT or Apache grant for a component you ship, this is not it, and the only place the answer exists is the licence text itself. Two smaller details sit alongside it: conduct reports go to a personal address, [email protected], and a SECURITY.md is present without the README pointing at it.
Editorial conclusion
Use Animate.css when you want a fixed set of keyframe animations and can live with the animate__ naming scheme, and treat whatever version you install as a 2020 snapshot rather than as the state of the repository. Two things to check before you ship it. The stylesheet your bundler picks up is animate.css, the development build, because that is the name in both main and style, so measure the payload yourself. And the licence is the Hippocratic License, declared as Hippocratic-2.1 in package.json, whose terms the repository does not restate; read them at firstdonoharm.dev before you put the library in a product.
Frequently asked questions
What is Animate.css?
It is a cross-browser library of CSS animations, described as just-add-water, that you use by adding class names to elements. Every animation is named with the animate__ prefix, and the contributing guide groups them by category, with fades and bounces given as examples.
How do I install Animate.css?
The README gives two commands, npm install animate.css --save for npm and yarn add animate.css for yarn. There is no CDN snippet in the file, and the full documentation lives on the website at animate.style rather than in the repository.
How do I add Animate.css to an HTML page?
Install the package, then apply the animate__ prefixed class names to the elements you want to move, following the examples on the documentation site. The repository's own documentation for the v3 line and earlier is kept separately, at a frozen commit rather than on a branch.
Does Animate.css respect reduced motion preferences?
Yes. It supports the prefers-reduced-motion media query, and on what the file calls currently all the major browsers and operating systems, a user who turns on reduce motion in system preferences gets CSS transitions disabled with no extra work from the site.
Official sources
Add this badge to your README
If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.
[](https://hysenlabs.com/projects/animate-css-animate-css)