W3docs
es
Iniciar sesión

Propiedad CSS transition-delay

How to use the transition-delay CSS longhand property to specify starting time for the transition effect. See property values and try examples.

La propiedad CSS transition-delay especifica cuándo debe comenzar el efecto de transición.

Es una de las propiedades CSS3.

El valor predeterminado es 0s, lo que significa que el efecto de transición comienza de inmediato.

El desplazamiento de tiempo especificado retrasa el inicio de la animación. También se permiten valores negativos. Un retraso negativo hace que la transición comience a mitad de su línea de tiempo de animación.

El valor puede ser un tiempo en segundos o milisegundos, o una lista separada por comas de valores de tiempo. Cuando se proporcionan varios valores, se asignan a las propiedades correspondientes en la lista transition-property. Esta propiedad también está incluida en la propiedad abreviada transition.

info

Los navegadores modernos admiten esta propiedad de forma nativa sin prefijos de proveedor.

Valor inicial0s
Se aplica aTodos los elementos, pseudo-elementos ::before y ::after.
HeredableNo.
AnimableNo.
VersiónCSS3
Sintaxis DOMobject.style.transitionDelay = "3s";

Sintaxis

transition-delay: time | initial | inherit;

Ejemplo de la propiedad transition-delay:

Ejemplo de código CSS transition-delay

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width;
        transition-duration: 1s;
        transition-delay: 0s;
      }
      div:hover {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de la propiedad transition-delay con un retraso de 2 segundos:

Otro ejemplo de código CSS transition-delay

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width height;
        transition-duration: 3s;
        transition-delay: 2s;
      }
      div:hover {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element and wait 2 seconds to see the effect.</p>
    <div></div>
  </body>
</html>
Pruébalo tú mismo »

Valores

ValorDescripción
timeEspecifica cuántos segundos o milisegundos debe esperar un efecto de transición para comenzar. El valor predeterminado es 0s.
initialHace que la propiedad use su valor predeterminado.
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica

¿Qué afirmación es correcta sobre la propiedad transition-delay?