Transition Delay

Defines the delay for the start a transition.

Classes#

Class	Properties
transition-delay-100	transition-delay: 100ms;
transition-delay-150	transition-delay: 150ms;
transition-delay-200	transition-delay: 200ms;
transition-delay-300	transition-delay: 300ms;
transition-delay-400	transition-delay: 400ms;
transition-delay-500	transition-delay: 500ms;
transition-delay-1000	transition-delay: 1000ms;

Examples#

Hover me

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