TailwindCSS Animations

TailwindCSS comes with premade animation to helps you bootstrap your project.

Published 2021-06-08

TailwindCSS Animation utilities

TailwindCSS comes with premade animation to helps you bootstrap your project.

You can check the TailwindCSS Documentation about the animation utilities.

SpinPingPulseBounce
animate-spinanimate-pinganimate-pulseanimate-bouce
<section class="flex flex-wrap w-full py-8 justify-center items-center space-x-4">
  <div class="bg-indigo-500 flex items-center text-indigo-50 font-semibold p-4 rounded">
    <svg class="animate-spin h-5 w-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
    </svg>
    Loading...
  </div>
  <div class="bg-indigo-500 flex items-center text-indigo-50 font-semibold p-4 rounded">
    <span class="animate-ping bg-white w-3 h-3 rounded-full mr-4"> </span>
    Location
  </div>
  <div class="rounded-md flex items-end border justify-center w-12 h-12 text-indigo-600">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 animate-bounce absolute" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
    </svg>
  </div>
  <div class="border border-indigo-200 flex items-center text-indigo-50 font-semibold p-4 rounded">
    <div class="animate-pulse flex flex-col">
      <span class="w-16 h-2 bg-indigo-500"></span>
      <span class="w-16 h-2 bg-indigo-400 mt-1"></span>
      <span class="w-16 h-2 bg-indigo-300 mt-1"></span>
    </div>
  </div>
</section>

Related Tutorials :