Tailwind Animation CSS

Tailwind animation is an essential aspect of modern web design, as it adds interactivity and enhances the user experience.

Animation is an essential aspect of modern web design, as it adds interactivity and enhances the user experience.

Tailwind CSS, a popular utility-first framework, offers a powerful set of classes to implement animations efficiently. With Tailwind CSS, you can create complex animations without writing custom CSS, streamlining your development process.

Scroll Down to see Stunning Tailwind Animation Example 🙂

Overview of Tailwind CSS Animation

Tailwind CSS provides two primary ways to handle animations:

Built-in Animation Utilities: Predefined classes for common animation effects.
Custom Animations: Tailored animations defined in the Tailwind configuration file.

Animations in Tailwind rely heavily on the @keyframes rule and can be customized to suit specific needs. The animation system includes several utilities:

animate- Classes: Control animation behavior.
Duration Utilities: Set the animation’s duration.
Timing Utilities: Define easing functions.
Delay Utilities: Add delays to the animations.

Core Animation Classes in Tailwind CSS

2.1 Predefined Animation Classes

Tailwind comes with several built-in animations, such as:

animate-none: Disables animations.
animate-spin: Creates a spinning effect.
animate-ping: Generates a pulsing effect.
animate-pulse: Creates a subtle pulsing effect, often used for loading indicators.
animate-bounce: Makes the element bounce up and down.

Preview

Show Code

<div class="flex items-center mb-6 gap-x-4"><div class="animate-spin h-8 w-8 bg-blue-500 rounded-full"></div>
<div class="animate-ping h-8 w-8 bg-red-500 rounded-full"></div>
<div class="animate-pulse h-8 w-8 bg-green-500 rounded-full"></div>
<div class="animate-bounce h-8 w-8 bg-yellow-500 rounded-full"></div></div>

3. Animation Duration

The duration- utilities define the length of the animation. Tailwind provides preconfigured durations, which can also be customized.

Classes:

duration-75: 75ms
duration-100: 100ms
duration-150: 150ms
duration-200: 200ms
duration-300: 300ms
duration-500: 500ms
duration-1000: 1000ms

Preview

Show Code

<div class="animate-bounce mb-4 duration-500 h-8 w-8 bg-blue-500 rounded-full"></div>

4. Animation Timing Functions

Tailwind provides ease- utilities to define the animation’s timing functions, controlling how the animation progresses over time.

Classes:

ease-linear
ease-in
ease-out
ease-in-out

Preview

Show Code

<div class="animate-bounce ease-in-out duration-300 h-8 w-8 bg-red-500 rounded-full"></div>

5. Animation Delay

The delay- utilities allow you to postpone the start of an animation.

Classes:

delay-75: 75ms
delay-100: 100ms
delay-150: 150ms
delay-200: 200ms
delay-300: 300ms

Preview

Show Code

<div class="animate-ping delay-200 h-8 w-8 bg-green-500 rounded-full"></div>

6. Custom Animations in Tailwind CSS

To create custom animations, you need to configure the @keyframes and animation properties in the tailwind.config.js file

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

// Usage
<div class="animate-wiggle h-8 w-8 bg-orange-500 rounded-full"></div>

Tailwind Animation Cheatsheet

Utility	Description	Example
`animate-spin`	Adds a spinning effect	`<div class="animate-spin"></div>`
`animate-ping`	Adds a pinging (pulse) effect	`<div class="animate-ping"></div>`
`animate-pulse`	Adds a pulsing effect	`<div class="animate-pulse"></div>`
`animate-bounce`	Adds a bouncing effect	`<div class="animate-bounce"></div>`
`duration-500`	Sets animation duration to 500ms	`<div class="duration-500"></div>`
`ease-in-out`	Applies an ease-in-out timing function	`<div class="ease-in-out"></div>`
`delay-200`	Delays animation by 200ms	`<div class="delay-200"></div>`

Preview

Show Code

<div class="relative inline-flex m-4">
    <button type="button" class="inline-flex items-center px-4 py-2 font-medium border border-red-200 text-sm rounded-md text-red-700 bg-white transition ease-in-out duration-150" aria-label="animation">
        Transactions
    </button>
    <span class="flex absolute h-3 w-3 top-0 right-0 -mt-1 -mr-1">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-300 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-3 w-3 bg-red-600"></span>
    </span>
</div>

Preview

Show Code

<div
  class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] text-surface motion-reduce:animate-[spin_1.5s_linear_infinite]"
  role="status">
</div>

Preview

Show Code

<div class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat">
    <img src="https://designcools.com/wp-content/uploads/2024/10/pexels-enginakyurt-1435849-scaled.jpg" class="max-w-xs" alt="tailwind animation" />
    <div class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-gradient-to-r from-indigo-400 via-purple-600 to-pink-600 opacity-0 transition duration-500 ease-in-out hover:opacity-70"></div>
</div>

Preview

Show Code

<button class="px-5 py-2.5 relative rounded group overflow-hidden font-medium bg-red-50 text-red-600 inline-block">
    <span class="absolute top-0 left-0 flex w-full h-0 mb-0 transition-all duration-200 ease-out transform translate-y-0 bg-red-600 group-hover:h-full opacity-90"></span>
    <span class="relative group-hover:text-white">Button Text</span>
</button>

Preview

Show Code

<button aria-label="button animation" class="py-2.5 pl-4 relative inline-flex items-center justify-start pr-12 overflow-hidden font-medium text-red-600 transition-all duration-150 ease-in-out rounded hover:pl-10 hover:pr-6 bg-gray-50 group">
    <span class="absolute bottom-0 left-0 w-full h-1 transition-all duration-150 ease-in-out bg-red-600 group-hover:h-full"></span>
    <span class="absolute right-0 pr-4 duration-300 ease-out group-hover:translate-x-12">
        <svg class="w-5 h-5 text-red-400" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
            <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
        </svg>
    </span>
    <span class="absolute left-0 pl-2.5 -translate-x-12 group-hover:translate-x-0 ease-out duration-300">
        <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
            <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
        </svg>
    </span>
    <span class="relative w-full text-left transition-colors duration-300 ease-in-out group-hover:text-white">Submit</span>
</button>

Preview

Show Code

<div class="min-h-[230px] flex items-center justify-center">
    <button aria-label="button animation" class="relative inline-block text-base group">
        <span class="relative z-20 block px-5 py-2.5 overflow-hidden font-normal transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
            <span class="absolute inset-0 w-full h-full px-5 py-2.5 rounded-lg bg-gray-50"></span>
            <span class="absolute left-0 w-48 h-48 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
            <span class="relative">Read More</span>
        </span>
        <span class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0" data-rounded="rounded-lg"></span>
    </button>
</div>

Preview

Show Code

<button aria-label="button animation" class="relative inline-flex items-center px-12 py-2.5 overflow-hidden font-medium text-red-600 border-2 border-red-600 rounded hover:text-white group">
    <span class="absolute left-0 block w-full h-0 transition-all bg-red-600 opacity-100 group-hover:h-full top-1/2 group-hover:top-0 duration-400 ease"></span>
    <span class="absolute right-0 flex items-center justify-start w-10 h-10 duration-300 transform translate-x-full group-hover:translate-x-0 ease">
        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
            <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
        </svg>
    </span>
    <span class="relative font-normal">Get in touch</span>
</button>

Preview

Show Code

<button aria-lable="button animation" class="relative inline-flex items-center justify-start px-6 py-2.5 overflow-hidden font-normal transition-all bg-white rounded border border-gray-200 group hover:border-purple-600">
    <span
        class="w-48 h-48 rounded rotate-[-40deg] bg-purple-600 absolute bottom-0 left-0 -translate-x-full ease-out duration-500 transition-all translate-y-full mb-9 ml-9 group-hover:ml-0 group-hover:mb-32 group-hover:translate-x-0"
    ></span>
    <span class="relative w-full text-left text-black transition-colors duration-300 ease-in-out group-hover:text-white">Hover Effect</span>
</button>

Preview

Show Code

<button aria-lable="button animation" class="relative inline-flex items-center justify-center p-4 px-5 py-2.5 overflow-hidden font-normal text-indigo-600 rounded shadow-2xl group">
    <span class="absolute top-0 left-0 w-48 h-48 -mt-10 -ml-3 transition-all duration-700 bg-slate-500 rounded-full blur-md ease"></span>
    <span class="absolute inset-0 w-full h-full transition duration-700 group-hover:rotate-180 ease">
        <span class="absolute bottom-0 left-0 w-24 h-24 -ml-10 bg-black rounded-full blur-md"></span>
        <span class="absolute bottom-0 right-0 w-24 h-24 -mr-10 bg-gray-700 rounded-full blur-md"></span>
    </span>
    <span class="relative text-white">Rotate Gradient</span>
</button>

Conclusion

Tailwind CSS simplifies the process of adding animations with its utility classes. Whether you’re using predefined animations or crafting custom ones, Tailwind makes it easy to implement engaging and interactive designs. By combining utilities and customizing configurations, you can achieve unique animations tailored to your project needs. Experiment with these tools and bring your web designs to life!

900+ Modern Tailwind Components Design

Stay in the loop with everything you need to know.

Check Now