Beautiful Tailwind animations for your app in seconds
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Beautiful Tailwind animations for your app in seconds
-
Install NPM package:
npm install @lorenzopalaia/tailwind-animations
-
Add the plugin to your
tailwind.config.jsfile:plugins: [ require('@lorenzopalaia/tailwind-animations'), ... ]
Follow the schema animation-{name}, where:
nameis the pattern name
For example:
<div class="animate-rainbow-river">...</div>Here's the full list of available animations.
Perfect for buttons, hover effects & adding a little magic. All gradients have a duration between 2s - 5s and can be customized to taste
rainbow-river, green-swoosh, fuzzy-dream, misty-fade, hazy-twist, mystic-aura, black-swoosh, tranquil-waters, diagonal-blaze, diagonal-ocean-wave, diagonal-purple-dream, diagonal-rotating-sun, diagonal-galaxy, purple-swoosh, blurred-swoosh, serene-sunset, vibrant-sun, shifting-triangles, mellow-embers, vertical-bliss, vertical-raindance, vertical-azure-wave, vertical-sunset-tide, vertical-golden-dream
Perfect for full screen immersive experiences and backdrops (recommended viewing this on desktop)
blue-galaxy, gray-fluff, pastel-dream, amethyst-midnight, golden-horizon, rose-blush, lavender-dream, pink-blossom, cosmic-wave, glow-next-door, ski-haze
Perfect for fun & simple interactivity. Similar to animate-spin, animate-ping, animate-pulse, animate-bounce classes from Tailwind.
wobble, melt, float, breathe, squiggle, flip-and-spin, twist, pop, scatter, morphing-rectangle
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
Lorenzo Palaia - lorenzopalaia53@gmail.com
Project Link: https://github.com/lorenzopalaia/Tailwind-Animations