transition-delay
En esta página
| Clase | Propiedades CSS |
|---|---|
delay-<number> |
transition-delay: <number>ms; |
delay-(<custom-property>) |
transition-delay: var(<custom-property>); |
delay-[<value>] |
transition-delay: <value>; |
Examples#
Basic example#
Use utilities like delay-150 and delay-700 to set the transition delay of an element in milliseconds:
{
delay-150
delay-300
delay-700
<!-- [!code classes:delay-150,delay-300,delay-700] -->
<button class="transition delay-150 duration-300 ease-in-out ...">Button A</button>
<button class="transition delay-300 duration-300 ease-in-out ...">Button B</button>
<button class="transition delay-700 duration-300 ease-in-out ...">Button C</button>
Supporting reduced motion#
For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the motion-safe and motion-reduce variants:
<!-- [!code classes:motion-reduce:delay-0] -->
<button type="button" class="delay-300 motion-reduce:delay-0 ...">
<!-- ... -->
</button>