Beautiful
Tailwind CSS
Animations
Everything You Need to Animate
Professional-grade animations with production-ready code examples for every major framework.
Ready to Use
Copy and paste animations with zero configuration. Works with any Tailwind CSS setup.
Multi-Framework
Get code examples for React, Vue, Svelte, Angular, and vanilla JavaScript.
Customizable
Easy to customize with Tailwind's utility classes. Change colors, timing, and effects.
Responsive
All animations work perfectly on mobile, tablet, and desktop devices.
Performance
Optimized CSS animations with hardware acceleration for smooth 60fps performance.
Open Source
MIT licensed, free to use in personal and commercial projects. Contribute on GitHub.
Works with Your Framework
Get framework-specific code examples for seamless integration into your projects.
React
Vue
Svelte
Angular
JavaScript
Ready to Animate?
Start exploring our collection of animations and bring your projects to life with beautiful, smooth transitions.
Quick Installation
Get started in seconds. Choose your preferred method and start animating right away.
NPM Package
Install via package manager
npm install tailwind-animations-showcasepnpm add tailwind-animations-showcaseyarn add tailwind-animations-showcaseCDN Link
Direct browser usage
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/tailwind-animations@latest/dist/animations.css"> Pro Tip
No build step required! Just add the CDN link and start using animations immediately.
Quick Start in 3 Steps
Install
Choose your preferred installation method from above
Copy
Browse animations and copy the classes you like
Animate
Add classes to your elements and watch them come to life
Example Usage
HTML
<div class="animate-slide-up-fade">
Hello World!
</div>React/Vue/Svelte
<Button className="animate-bounce-attention">
Click me!
</Button>