Tailwind CSS - Animation

Previous
Quiz
Next

Tailwind CSS Animation is a utility that is used to define the css animation for elements.

Tailwind CSS Animation Classes

The following is the list of Tailwind CSS Animation Classes that are used to apply smooth animation on elements.

Class CSS Properties
animate-none animation: none;
animate-spin animation: spin 1s linear infinite;
@keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
animate-ping animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
@keyframes ping {
    75%, 100% {
      transform: scale(2);
      opacity: 0;
    }
  }
animate-pulse animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: .5;
    }
  }
animate-bounce animation: bounce 1s infinite;
@keyframes bounce {
    0%, 100% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: translateY(0);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }

Functionality of Tailwind CSS Animation Classes

  • animate-none: This class is used to remove the animation from an elment.
  • animate-spin: This class is used to apply a spin animation by rotating an element 360 degrees in a clockwise direction.
  • animate-ping: This class is used to apply a ping animation by scaling element and making it fade.
  • animate-pulse: This class is used to apply a pusle animation that slightly fade in and out the element.
  • animate-bounce: This class is used to apply a bounce animation that bounce an element up and down.

Tailwind CSS Animation Examples

The following example will illustrate the different Animation for an element.

Setting Element spin behavior

The below example is illustrating the use of animate-spin class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4 text-center">
    <h2 class="text-2xl font-bold mb-8">
        Tailwind CSS Animate spin Class
    </h2>
    <div class="flex items-center justify-center 
                hover:animate-spin delay-500">
        <div class="w-28 h-28 rounded-full bg-yellow-400 relative
                    flex justify-center align-center">
            <div class="absolute top-8 left-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute top-8 right-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute bottom-4 w-14 h-6 bg-black
                        rounded-b-full">
            </div>
        </div>
    </div>
    <p>Hover the smile</p>
</body>
</html>

Setting Element ping behavior

The below example is illustrating the use of animate-ping class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4 text-center">
    <h2 class="text-2xl font-bold mb-8">
        Tailwind CSS Animate Ping Class
    </h2>
    <div class="flex items-center justify-center 
                hover:animate-ping delay-500">
        <div class="w-28 h-28 rounded-full bg-yellow-400 relative
                    flex justify-center align-center">
            <div class="absolute top-8 left-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute top-8 right-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute bottom-4 w-14 h-6 bg-black
                        rounded-b-full">
            </div>
        </div>
    </div>
    <p>Hover the smile</p>
</body>
</html>

Setting Element pulse behavior

The below example is illustrating the use of animate-pulse class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4 text-center">
    <h2 class="text-2xl font-bold mb-8">
        Tailwind CSS Animate Pulse Class
    </h2>
    <div class="flex items-center justify-center 
                hover:animate-pulse delay-500">
        <div class="w-28 h-28 rounded-full bg-yellow-400 relative
                    flex justify-center align-center">
            <div class="absolute top-8 left-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute top-8 right-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute bottom-4 w-14 h-6 bg-black
                        rounded-b-full">
            </div>
        </div>
    </div>
    <p>Hover the smile</p>
</body>
</html>

Setting Element Bounce behavior

The below example is illustrating the use of animate-bounce class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4 text-center">
    <h2 class="text-2xl font-bold mb-8">
        Tailwind CSS Animate Bounce Class
    </h2>
    <div class="flex items-center justify-center 
                hover:animate-bounce delay-500">
        <div class="w-28 h-28 rounded-full bg-yellow-400 relative
                    flex justify-center align-center">
            <div class="absolute top-8 left-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute top-8 right-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute bottom-4 w-14 h-6 bg-black
                        rounded-b-full">
            </div>
        </div>
    </div>
    <p>Hover the smile</p>
</body>
</html>
Print Page
Previous
Next