Propiedad CSS transition-duration

La propiedad transition-duration define cuánto tiempo debe durar la animación de transición.

La propiedad transition-duration es una de las propiedades CSS3.

Se puede especificar una o varias duraciones separadas por comas. Cada duración se aplicará a la propiedad correspondiente definida por la propiedad CSS transition-property. La lista de transition-property actúa como la lista principal; si hay menos duraciones que propiedades, la lista de duraciones se repite. Si hay más duraciones especificadas, la lista se acorta.

El valor predeterminado es 0s, lo que significa que la transición no tendrá ningún efecto.

INFO

Los prefijos de proveedor (como -webkit-, -moz-, -o-) ya no son necesarios para los navegadores modernos, ya que transition-duration tiene compatibilidad completa en todas las versiones actuales.

Initial Value	0s
Applies to	All elements, ::before and ::after pseudo-elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.transitionDuration = "3s";

Sintaxis

Valores de CSS transition-duration

css

transition-duration: time | initial | inherit;

Ejemplo de la propiedad transition-duration:

Ejemplo de código CSS transition-duration

html

<!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>

Try it Yourself »

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

Otro ejemplo de código CSS transition-duration

html

<!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>

Try it Yourself »

Valores

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

Práctica

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

Su valor predeterminado es 0s.Solo se puede especificar una duración.Se puede aplicar a los pseudo-elementos ::before y ::after.

Propiedad CSS transition-duration ​

Sintaxis ​

Ejemplo de la propiedad transition-duration: ​

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