⌘ K
esc

    Transition Duration

    Defines how long a transition should take to complete.

    Classes
    Class Properties
    transition-duration-100 transition-duration: 100ms;
    transition-duration-150 transition-duration: 150ms;
    transition-duration-200 transition-duration: 200ms;
    transition-duration-300 transition-duration: 300ms;
    transition-duration-400 transition-duration: 400ms;
    transition-duration-500 transition-duration: 500ms;
    transition-duration-1000 transition-duration: 1000ms;
    transition-duration-2000 transition-duration: 2000ms;
    transition-duration-3000 transition-duration: 3000ms;
    Examples
    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-colors transition-duration-100 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-colors 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-colors transition-duration-1000 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>