How to Add Animation in Tailwind CSS?

Ayyaz

@AyyazTech

Introduction

Hello, and welcome to this tutorial on adding animations to your projects using Tailwind CSS. In this video, we'll cover how to use existing animations, create custom animations, and apply them to real-world use cases. Let's get started!

Using Existing Animations

Tailwind CSS provides a few built-in animations that you can use right away. These include animate-spin, animate-ping, animate-pulse, and animate-bounce. To use these animations, simply add the corresponding class to your HTML element. For example:

<div class="w-20 h-20 p-2 bg-blue-500 rounded-md animate-spin"></div>

<div class="w-20 h-20 p-2 bg-blue-500 rounded-md animate-spin"></div>

This will create a spinning animation for the element.

Creating Custom Animations

To create custom animations, you'll need to define keyframes and add them to your tailwind.config.js file. Let's create a simple "wiggle" animation as an example:

1. Define the keyframes:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },
    },
  },
  variants: {},
  plugins: [],
};

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },
    },
  },
  variants: {},
  plugins: [],
};

1. Add the animation to your theme configuration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      },
    },
  },
  variants: {},
  plugins: [],
};

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      },
    },
  },
  variants: {},
  plugins: [],
};

1. Apply the custom animation to your HTML element:

<div class="w-10 h-10 bg-black animate-wiggle"></div>

<div class="w-10 h-10 bg-black animate-wiggle"></div>

This will create a wiggle animation for the element.

Real-World Use Cases

Now let's look at some practical examples of how to use animations in real-world scenarios.

Example 1: Loading Spinner

Create a loading spinner using the animate-spin class:

<button type="button" class="bg-indigo-600" disabled>
  <svg class="motion-safe:animate-spin h-5 w-5 mr-3" viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing
</button>

<button type="button" class="bg-indigo-600" disabled>
  <svg class="motion-safe:animate-spin h-5 w-5 mr-3" viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing
</button>

This will create a spinning animation for the SVG element inside the button.

Example 2: Hover Animation

Apply an animation only when the element is hovered:

<div class="w-20 h-20 p-2 bg-purple-500 rounded-md hover:animate-ping"></div>

<div class="w-20 h-20 p-2 bg-purple-500 rounded-md hover:animate-ping"></div>

This will create a ping animation for the element when it's hovered.

Example 3: Responsive Animation

Apply an animation only at specific breakpoints:

<div class="animate-spin md:animate-none">
  <!-- ... -->
</div>

<div class="animate-spin md:animate-none">
  <!-- ... -->
</div>

This will apply the animate-spin animation on small screens and remove it on medium screens and above.

Conclusion

In this tutorial, we've covered how to use existing animations, create custom animations, and apply them to real-world use cases using Tailwind CSS. With these techniques, you can create engaging and interactive user experiences for your projects. Thanks for following, and happy coding!

Youtube Video: