Tailwind CSS Animation

Animation

https://tailwindcss.com/docs/animation

Class	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);   } }

 

Spin

<div class="flex items-center justify-center">
  <button type="button" class="inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-white bg-indigo-500 hover:bg-indigo-400 transition ease-in-out duration-150 cursor-not-allowed" disabled>
    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
      </svg>
      Processing..
  </button>
</div>

 

Ping

<div class="flex items-center justify-center">
    <span class="relative inline-flex">
      <button type="button" class="inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-sky-500 bg-white dark:bg-slate-800 transition ease-in-out duration-150 cursor-not-allowed ring-1 ring-slate-900/10 dark:ring-slate-200/20" disabled="">
        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-sky-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
      </span>
    </span>
  </div>

 

Pluse

<div class="flex items-center justify-center">
    <div class="bg-white dark:bg-slate-800 p-4 ring-1 ring-slate-900/5 rounded-lg shadow-lg max-w-xs w-full h-28">
      <div class="flex space-x-4 animate-pulse">
        <div class="rounded-full bg-slate-200 dark:bg-slate-700 h-10 w-10"></div>
        <div class="flex-1 space-y-6 py-1">
          <div class="h-2 bg-slate-200 dark:bg-slate-700 rounded"></div>
          <div class="space-y-3">
            <div class="grid grid-cols-3 gap-4">
              <div class="h-2 bg-slate-200 dark:bg-slate-700 rounded col-span-2"></div>
              <div class="h-2 bg-slate-200 dark:bg-slate-700 rounded col-span-1"></div>
            </div>
            <div class="h-2 bg-slate-200 dark:bg-slate-700 rounded"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

 

Bounce

<div class="flex justify-center">
    <div class="animate-bounce bg-white dark:bg-slate-800 p-2 w-10 h-10 ring-1 ring-slate-900/5 dark:ring-slate-200/20 shadow-lg rounded-full flex items-center justify-center">
      <svg class="w-6 h-6 text-violet-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
        <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
      </svg>
    </div>
  </div>