Transition Timing Function

Specifies the speed curve of a transition.

Classes
Class Properties
transition-linear transition-timing-function: linear;
transition-ease-in transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
transition-ease-out transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-ease-in-out transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
Examples
Hover me
Hover me
Hover me
Hover me

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="transition-linear transition-duration-500 bg-blue-100 hover:bg-blue-300 text-blue-500 hover:text-white
    flex align-items-center justify-content-center font-bold border-round cursor-pointer m-2 px-5 py-3 shadow-3">Hover me</div>
    <div class="transition-ease-in transition-duration-500 bg-blue-100 hover:bg-blue-300 text-blue-500 hover:text-white
    flex align-items-center justify-content-center font-bold border-round cursor-pointer m-2 px-5 py-3 shadow-3">Hover me</div>
    <div class="transition-ease-out transition-duration-500 bg-blue-100 hover:bg-blue-300 text-blue-500 hover:text-white
    flex align-items-center justify-content-center font-bold border-round cursor-pointer m-2 px-5 py-3 shadow-3">Hover me</div>
    <div class="transition-ease-in-out transition-duration-500 bg-blue-100 hover:bg-blue-300 text-blue-500 hover:text-white
    flex align-items-center justify-content-center font-bold border-round cursor-pointer m-2 px-5 py-3 shadow-3">Hover me</div>
</div>