Utility Animations and Transitions

Tailwind provides four full animation utilities: .animate-spin, .animate-pulse, and .animate-bounce. These classes define the CSS for an animation and a set of keyframes, so you can use them on an element as-is.

  • .animate-spin: Animates a full rotation of an object 360 degrees in one second.
  • .animate-pulse: Produces a slight fade effect by transitioning between 0.1 opacity and 0.5 over two seconds.
  • .animate-bounce: Describes a slight downward bounce over one second.

Other utilities:

  • animate-{name}: Applies a predefined animation.
  • transition: Enables transitions.
  • duration-{time}: Sets transition duration.
  • ease-{timing}: Sets transition timing function.
  <div class="flex items-center justify-center h-screen bg-gray-100">
    <div class="text-center">
      <p class="text-xl mb-4">Scroll Down</p>
      <svg class="w-6 h-6 mx-auto text-blue-500 animate-bounce" stroke-width="3" stroke="red">
        <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
      </svg>
    </div>
  </div>

Transformations

CSS transformations allow you to change an element's size, location, rotation, or skew. Tailwind provides utilities for these transformations.

  • scale-{amount}: Scales an element.
  • rotate-{degrees}: Rotates an element.
  • translate-x-{amount}, translate-y-{amount}: Translates an element.

Example:

  • Scale: transform transition duration-1000 hover:scale-110 (makes an element slightly bigger on hover over one second).
  • Rotate: Rotate an element clockwise with values like 0, 1, 2, 3, 6, 12, 45, 90, and 180 degrees.
  • Translate: Moves the element using the padding/margin scale where each number represents 0.25rem.
<div class="transform scale-100 rotate-45 translate-x-4 translate-y-4">
  Transformed element
</div>