Animating with Keyframes in Tailwind CSS

1. Built-In Animations

Tailwind offers some default animations:

• animate-spin – spinning loader
• animate-ping – fading circle
• animate-pulse – pulsing element
• animate-bounce – bouncing motion

<div class="animate-spin"></div>
<div class="animate-ping"></div>
<div class="animate-pulse"></div>
<div class="animate-bounce"></div>
            

2. Creating Custom Keyframe Animations

You can define custom keyframes and animation classes in your tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      }
    }
  }
}
            

Then apply it using:

<div class="animate-wiggle">I'm wiggling!</div>
            

3. Animation Timing Utilities

• duration-{ms} – sets animation time
• delay-{ms} – delays animation
• ease-in / ease-out / ease-in-out / linear – timing function
• infinite, once, alternate – via config or custom class

Combine them to fine-tune animation experience.

Conclusion

Tailwind makes it incredibly easy to use both predefined and custom animations. You can quickly animate elements without writing custom CSS, and scale up with your own motion designs as needed.