Retardo de transición - Trucos CSS

Tabla de contenido

La transition-delaypropiedad, que normalmente se usa como parte de la transitiontaquigrafía, se usa para definir un período de tiempo para retrasar el inicio de una transición.

.delay-me ( transition-delay: 0.25s; )

El valor puede ser uno de los siguientes:

Un valor de tiempo válido definido en segundos o milisegundos, por ejemplo, 1.3so125ms
Una lista de valores de tiempo separados por comas, para definir valores de retardo separados en múltiples transiciones para un solo elemento, p. 1s background-color, 350ms transform

El valor predeterminado para transition-delayes 0s, lo que significa que no se producirá ningún retraso y la transición comenzará a ocurrir de inmediato. El valor de tiempo se puede expresar como un número decimal para una sincronización más precisa.

Cuando una transición tiene un valor de retardo que es negativo, hará que la transición comience inmediatamente (sin retardo), sin embargo, la transición comenzará en la mitad del proceso, como si ya hubiera comenzado.

El siguiente lápiz muestra un efecto de desplazamiento sobre un cuadro que usa un transition-delayvalor de 2scon una duración de transición de 1s:

Vea la
demostración de retraso de transición de lápiz de CSS-Tricks (@ css-tricks)
en CodePen.

Ahora compárelo con la siguiente demostración, que tiene un retraso -1sy una duración de 3s:

Vea la
demostración de retardo de transición negativo de lápiz de CSS-Tricks (@ css-tricks)
en CodePen.

Observe que en el segundo ejemplo, solo los dos tercios finales de la transición real son visibles y no hay demora. El valor negativo elimina el retraso y efectivamente corta la duración.

Para la compatibilidad en todos los navegadores compatibles, se requieren prefijos de proveedor, con la sintaxis estándar declarada en último lugar:

.example ( -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )

IE10 (la primera versión estable de IE compatible transition-delay) no requiere el -ms-prefijo.

Un caso de uso común son las transiciones escalonadas:

Vea las
animaciones escalonadas de la pluma de Chris Coyier (@chriscoyier)
en CodePen.

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.