Tailwind CSS Transitions

Translition Property

https://tailwindcss.com/docs/transition-property

Class	Properties
transition-none	transition-property: none;
transition-all	transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-fillter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-colors	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-opacity	transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-shadow	transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-transform	transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;

 

<div class="flex justify-around text-white text-sm font-bold leading-6">
  <button class="px-4 py-2 font-semibold text-sm bg-blue-500 text-white rounded-md shadow-sm hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 ease-in-out delay-150 duration-300">
    Save Changes
  </button>
</div>

Transition Duration

https://tailwindcss.com/docs/transition-duration

Class	transition-duration
duration-75	75ms
duration-100	100ms
duration-300	300ms
duration-1000	1000ms

 

<div class="flex flex-col sm:flex-row gap-8 sm:gap-0 justify-around text-white text-sm font-bold leading-6">
  <button class="px-4 py-2 font-semibold text-sm bg-violet-500 text-white rounded-md shadow-sm hover:scale-125 ease-in-out duration-150">dutation-150</button>
  <button class="px-4 py-2 font-semibold text-sm bg-violet-500 text-white rounded-md shadow-sm hover:scale-125 ease-in-out duration-300">dutation-300</button>
  <button class="px-4 py-2 font-semibold text-sm bg-violet-500 text-white rounded-md shadow-sm hover:scale-125 ease-in-out duration-500">dutation-500</button>
</div>

 

Transition Timing Function

https://tailwindcss.com/docs/transition-timing-function

Class	transition-timing-function
ease-linear	linear
ease-in	cubic-bezier(0.4, 0, 1, 1)
ease-out	cubic-bezier(0, 0, 0.2, 1)
ease-in-out	cubic-bezier(0.4, 0, 0.2, 1)

 

<div class="flex flex-col sm:flex-row gap-8 sm:gap-0 justify-around text-white text-sm font-bold leading-6 p-5">
  <button class="px-4 py-2 font-semibold text-sm bg-sky-500 text-white rounded-md shadow-sm hover:scale-125 ease-in duration-300">ease-in</button>
  <button class="px-4 py-2 font-semibold text-sm bg-sky-500 text-white rounded-md shadow-sm hover:scale-125 ease-out duration-300">ease-out</button>
  <button class="px-4 py-2 font-semibold text-sm bg-sky-500 text-white rounded-md shadow-sm hover:scale-125 ease-in-out duration-300">ease-in-out</button>
</div>

 

Transition Delay

https://tailwindcss.com/docs/transition-delay

Class	transition-delay
delay-75	75ms
delay-100	100ms
delay-500	500ms
delay-1000	1000ms

<div class="flex flex-col sm:flex-row gap-8 sm:gap-0 justify-around text-white text-sm font-bold leading-6 p-5">
  <button class="px-4 py-2 font-semibold text-sm bg-blue-500 text-white rounded-md shadow-sm hover:scale-125 ease-in-out duration-300 delay-150">delay-150</button>
  <button class="px-4 py-2 font-semibold text-sm bg-blue-500 text-white rounded-md shadow-sm hover:scale-125 ease-in-out duration-300 delay-300">delay-300</button>
  <button class="px-4 py-2 font-semibold text-sm bg-blue-500 text-white rounded-md shadow-sm hover:scale-125 ease-in-out duration-300 delay-700">delay-700</button>
</div>