TailMotion 🎬

150+ Premium CSS Animations for Tailwind CSS

Copy-paste production-ready CSS animations with Tailwind utility classes. Browse, preview, and copy in seconds. No dependencies, no JavaScript — pure CSS.

🌐 Live Demo

https://tyr1105.github.io/tailmotion/

✨ Features

• 80+ Free Animations — Fade, Slide, Scale, Rotate, Bounce, Shake, Special, Attention, Background, 3D, Spinners, Text, Reveal
• Tailwind v3 & v4 Ready — Uses animate-[...] syntax for maximum compatibility
• Copy-Paste — One click to copy Tailwind classes or raw CSS keyframes
• Interactive Playground — Click any animation to preview it in real-time
• Zero Dependencies — Pure CSS, no JavaScript runtime needed
• Dark Theme — Beautiful dark UI with gradient accents

📦 Pro Pack ($29)

The Pro Pack includes:

• 150+ animations (70+ exclusive)
• React component library with props for duration, delay, easing
• Vue component library with composition API support
• Figma animation library for design-to-code consistency
• SCSS/LESS source files for customization
• Lifetime updates — new animations added monthly

👉 Get Pro Pack on Gumroad

🚀 Quick Start

Using Tailwind Classes

<div class="animate-[fadeInUp_0.5s_ease-out_forwards]">
  Hello, World!
</div>

Using Raw CSS Keyframes

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.my-element {
  animation: fadeInUp 0.5s ease-out forwards;
}

📄 License

Free animations: MIT License Pro Pack: Single commercial license — use in unlimited projects

🔗 Links

• Live Demo
• Get Pro Pack
• GitHub