Animate.css with Tailwind CSS

#animatecss #tailwindcss #animations #configuration

If you have used Tailwind CSS, you might have noticed that it lacks proper animation utilities. It has only four animations by default - spin, ping, pulse, and bounce. This limitation makes us search for other methods and additional frameworks to animate the components. The most common one is Animate.css if you don't want to write all the keyframes yourself.

Animate.css (like Tailwind CSS) provides animation utility classes and works nicely alongside Tailwind. But since it is just a pure CSS library, it lacks Tailwind features like variants, directives, purging, and even editor tools like Tailwind Intellisense. But what if you can make Tailwind know about the animation classes provided by Animate.css?

The question will probably make you search for some plugin, and the first one on the list will be tailwindcss-animatecss. It is a great plugin in itself, except it requires quite a configuration. Although its adjustable (optional) settings are pretty nice, but setting the variants and required classes seems overkill in the new JIT mode.

So, I wrote a configuration myself – animated-tailwindcss. To use the configuration, you just need to install it, import it, and wrap your existing configuration with it. After being properly configured, you can use the animation utilities of Animate.css as if they are a part of the Tailwind CSS!

All your variants will work with the animation classes. You can use them inside the directives like @apply and @screen. Also, you will not have extra keyframes emitted to the code in production, and in development, you can use the Tailwind Intellisense without any extra configuration! The animation classes are motion-safe by default, i.e., animations will be disabled if the user prefers reduced motion.

Please give the configuration a try. If you feel that something went wrong, please comment or create an issue on GitHub. I am working on adding options to customize duration, delay, etc. They will be available soon!

Note that the only difference you will notice if you have used Animate.css earlier is that you need to reference the class names with the prefix animate- instead of animate__. Also, if you want, you can customize animations easily (add new or override the existing ones). Thank you!

Top comments (13)

Petr Zavičák • Dec 3 '21

"Since v2.6.0, you can also customize the translating distance of some of the animations using classes like this: animate-distance-[100px]."

I tried the animate-distance property, but it doesn't work. Which animation can it be used on and how exactly does it work?

Thanks for the great plugin, I don't understand why it doesn't have more downloads right now.

Divyansh Singh • Dec 6 '21 • Edited

Thanks for trying it. You can customize the behavior of the following animation classes using animate-distance-[...px] class:

animate-backXY
animate-bounceXY
animate-fadeXYBig
animate-hinge
animate-zoomXY

where X is one of {In, Out} and Y is one of {Down, Left, Right, Up}.

Tip: If you're using intellisense, you can just hover over animation class, and if --animate-distance variable appears in styles then you can change its value using animate-distance-[...px].

Regarding downloads stats, it is mainly because I have not put much effort to increase its publicity. And also partially owing to how npm calculates package performance, quality and maintenance scores. They basically look up for stuff like whether or not the package has frequent commits, releases, issues, has tests, linters, docs, types, badges, ci, how is the reputation of the publisher, how many github stars, forks, watchers, contributors, dependents are there, etc. I have many of them as can be seen from the GitHub repo, but I am not bundling that large scripts, dev dependencies list and other such stuff using which npm determines all that as they are useless to a user and wastes their bandwidth. The package.json that is being distributed with the plugin is way truncated down than what is being used for its development.

Petr Zavičák • Dec 7 '21

Thanks a lot! All I have to do "work around" right now is install NPM dependencies. I don't know much at all, I only know that this problem only occurred after installing animated-tailwindcss. I am currently solving the problem below using npm install --force, however it is not an ideal solution.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: tailwindcss@3.0.0-alpha.2
npm ERR! node_modules/tailwindcss
npm ERR! dev tailwindcss@"^3.0.0-alpha.2" from the root project
npm ERR! peer tailwindcss@">=2.0.0 || >=3.0.0-alpha.1" from @tailwindcss/aspect-ratio@0.3.0
npm ERR! node_modules/@tailwindcss/aspect-ratio
npm ERR! dev @tailwindcss/aspect-ratio@"^0.3.0" from the root project
npm ERR! 2 more (@tailwindcss/forms, @tailwindcss/typography)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev animated-tailwindcss@"^2.6.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: tailwindcss@2.2.19
npm ERR! node_modules/tailwindcss
npm ERR! peer tailwindcss@">=1.6.0" from animated-tailwindcss@2.6.0
npm ERR! node_modules/animated-tailwindcss
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Divyansh Singh • Dec 7 '21 • Edited

Can you create an issue on GitHub for this? github.com/ikcb/animated-tailwindc...

I basically need to know how to reproduce this. I would probably need your Node.js and yarn/npm version, and the contents of package.json.

UPDATE: Can you try v2.6.1 and see if the issue is fixed?

Petr Zavičák • Dec 8 '21

Version 2.6.1 solved the problem. Huge thanks!

Renan Franca • Aug 2 '23

Absolutely brilliant! 😃 Thanks to your help, we've now got it so that only the utilized animation class gets inserted into the generated CSS with PostCSS! 🙌 🎉 Let's keep the momentum going! 🚀

I gave the star to the repo!

Nils Domin • Jun 12 '21

Just tried, works great, thanks!!!

Danster2020 • Jul 20 '21

How do i add hover and active states to the animations eg:
hover:animate-bounceIn

Divyansh Singh • Jul 22 '21 • Edited

@flassgravel Hey there! You can directly use it like animate-animated hover:animate-bounceIn if you are using JIT mode. Without JIT mode, you first need to enable the variants. Please refer the official docs.

Note that, using hover may result in flickering. This is not a bug, but is how CSS :hover pseudo-class works. In this particular case the moment you will hover, the element will be transformed to scale3d(0.3, 0.3, 0.3). So, if your hover position was not near the center your mouse will be out of the element. Hence, the animation will be cut off. But now since the element is back to its original size, it will begin again, and will flicker continuously until the pointer is over pivot or completely outside the element. To prevent this, use the resolution mentioned in this answer.

With React frameworks, you can easily do something like this: codesandbox.io/s/fervent-babbage-y...