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

<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="transition-colors transition-duration-100 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-colors 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-colors transition-duration-1000 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>