Nearby lessons

60 of 61

šŸŽ¬ Tailwind CSS - Animation

šŸ“– Overview

Animation utilities apply pre-built CSS animations to elements. Tailwind includes several built-in animations and you can add custom ones via configuration.

šŸ“ Animation Utilities

Built-in animations:

  • animate-none - No animation
  • animate-spin - Continuous rotation (loading spinners)
  • animate-ping - Scale and fade out (notification badges)
  • animate-pulse - Fade in and out (skeleton loaders)
  • animate-bounce - Bounce up and down

Control animation with:

  • duration-{ms} - Animation duration
  • delay-{ms} - Animation delay
  • ease-{type} - Timing function
  • repeat-{n} / repeat-infinite - Iteration count
šŸŒ€

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

šŸŽØ Custom Animations

Add custom animations in tailwind.config.js:

  • Define keyframes in theme.extend.keyframes
  • Register animation in theme.extend.animation
  • Use with animate-{name} class

🧠 Test Your Knowledge

3 Questions

Progress: 0 / 3
Keep Going!Tailwind CSS - Transform