⌘ K
esc

    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">
        <div class="flex flex-wrap align-items-center justify-content-center card-container blue-container">
            <div class="transition-linear transition-duration-500 bg-blue-500 hover:bg-yellow-500 text-white 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-blue-500 hover:bg-yellow-500 text-white 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-blue-500 hover:bg-yellow-500 text-white 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-blue-500 hover:bg-yellow-500 text-white 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>
    </div>