Propiedad CSS transition-duration

La propiedad CSS transition-duration define cuánto tiempo tarda una animación de transición en pasar de su estado inicial a su estado final. Es una de las propiedades CSS3 y un componente longhand del shorthand transition.

Este capítulo explica cómo escribir duraciones válidas, en qué se diferencia una sola duración de una lista separada por comas, los errores comunes (valores cero, unidades faltantes, longitudes de lista no coincidentes) y cómo esta propiedad se relaciona con el resto de la familia de transiciones: transition-property, transition-timing-function y transition-delay.

Cómo se escribe una duración

Una duración es un valor <time> único, expresado en segundos (s) o milisegundos (ms):

transition-duration: 0.5s;   /* half a second */
transition-duration: 500ms;  /* the same thing */

Algunas reglas importantes a tener en cuenta desde el principio:

La unidad es obligatoria. Un número sin unidad como transition-duration: 2 es inválido y toda la declaración se ignora. Escribe siempre 2s o 2000ms.
Los valores negativos son inválidos. A diferencia de transition-delay, una duración no puede ser negativa; el navegador trata una duración negativa como 0s.
0s significa que no hay transición visible. Este es el valor por defecto, por lo que el cambio de propiedad ocurre de manera instantánea. Debes establecer una duración distinta de cero para que la animación sea visible.

Varias duraciones

Se puede especificar una o varias duraciones separadas por comas. Cada duración se aplica a la propiedad correspondiente listada en transition-property, que actúa como la lista principal:

transition-property: width, background-color;
transition-duration: 2s, 0.5s; /* width animates over 2s, background over 0.5s */

Si hay menos duraciones que propiedades, la lista de duraciones se repite hasta completar la lista. Si hay más duraciones que propiedades, las duraciones sobrantes se ignoran:

/* 3 properties, 1 duration → every property uses 1s */
transition-property: width, height, color;
transition-duration: 1s;

Información

Los prefijos de proveedor (como -webkit-, -moz-, -o-) ya no son necesarios para los navegadores modernos, ya que transition-duration es totalmente compatible con todas las versiones actuales.

Valor inicial	0s
Se aplica a	Todos los elementos, pseudoelementos ::before y ::after.
Heredable	No.
Animatable	No.
Versión	CSS3
Sintaxis DOM	object.style.transitionDuration = "3s";

Sintaxis

Valores de CSS transition-duration

transition-duration: time | initial | inherit;

Ejemplo de la propiedad transition-duration:

Ejemplo de código CSS transition-duration

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #666;
        transition-duration: 2s;
      }
      div:hover {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-duration property example</h2>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Pasa el cursor sobre el cuadro gris: como transition-duration es 2s, el ancho crece de forma suave durante dos segundos en lugar de cambiar de inmediato.

Ejemplo de la propiedad transition-duration con el valor "time":

Otro ejemplo de código CSS transition-duration

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #fff;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .example {
        padding: 1em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        position: relative;
        transition-property: background-color, left;
        transition-timing-function: linear, linear;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-duration: .3s, .3s;
      }
      .el2 {
        transition-duration: .6s, .6s;
      }
      .el3 {
        transition-duration: 1s, 1s;
      }
      .el4 {
        transition-duration: 2s, 2s;
      }
    </style>
  </head>
  <body>
    <h2>Transition-duration property example</h2>
    <div class="container">
      <p>
        <code>transition-duration: .3s, .3s;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-duration: .6s, .6s;</code>
      </p>
      <div class="example el2"></div>
      <p>
        <code>transition-duration: 1s, 1s;</code>
      </p>
      <div class="example el3"></div>
      <p>
        <code>transition-duration: 2s, 2s;</code>
      </p>
      <div class="example el4"></div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción
time	Especifica cuántos segundos o milisegundos debe tardar en completarse un efecto de transición. El valor por defecto es 0s.
initial	Establece esta propiedad en su valor por defecto.
inherit	Hereda esta propiedad de su elemento padre.

Propiedades relacionadas

transition-duration rara vez se usa de forma aislada. En la práctica se combina con los otros longhands de transición, normalmente a través del shorthand transition:

transition-property — qué propiedades CSS se animan.
transition-timing-function — la curva de aceleración (ease, linear, cubic-bezier).
transition-delay — cuánto tiempo esperar antes de que comience la transición.

Para movimientos en varios pasos que no se pueden expresar como un cambio simple de A a B, utiliza en su lugar animaciones CSS.

Práctica

¿Cuál afirmación sobre la propiedad transition-duration es incorrecta?

Su valor por defecto es 0s.Solo se puede especificar una duración.Se puede aplicar a los pseudoelementos ::before y ::after.