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

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