W3docs
es
Iniciar sesión

Propiedad CSS transition-duration

How to use the transition-duration CSS longhand property to define how long the animation should take. See property values and try examples.

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 Value0s
Applies toAll elements, ::before and ::after pseudo-elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.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 »

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

ValueDescription
timeEspecifica cuántos segundos o milisegundos debe tardar en completarse un efecto de transición. El valor predeterminado es 0s.
initialEstablece esta propiedad en su valor predeterminado.
inheritHereda esta propiedad de su elemento padre.

Práctica

Práctica

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