Propiedad animation-duration de CSS

La propiedad animation-duration define la duración (en segundos o milisegundos) que tarda una animación en completar un ciclo. Con mucha frecuencia, se utiliza la propiedad abreviada animation para establecer todas las propiedades de animación a la vez. El valor predeterminado de la propiedad animation-duration es 0s, lo que significa que la animación se completa instantáneamente y los fotogramas clave no tienen ningún efecto visible. Los valores negativos no son válidos y provocan que se ignore la propiedad. Sin embargo, algunas implementaciones anteriores pueden tratarlos como equivalentes a 0s.

Cuando se especifican varios valores separados por comas para cualquier propiedad de animación, se aplican en orden a las animaciones correspondientes definidas en animation-name. Si hay más valores que nombres de animación, los valores vuelven a empezar desde el principio.

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

Valor inicial	0s
Se aplica a	Todos los elementos, pseudo-elementos ::before y ::after.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.animationDuration = "4s";

Sintaxis

Sintaxis de la propiedad animation-duration de CSS

css

animation-duration: time | initial | inherit;

Ejemplo de la propiedad animation-duration:

Ejemplo de la propiedad CSS animation-duration con segundos

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 7s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #eee
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property</div>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad animation-duration con una duración de 6 segundos:

Ejemplo de la propiedad CSS animation-duration con 6 segundos

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .element {
        height: 200px;
        width: 200px;
        background-color: #1c87c9;
        animation: nudge 6s ease infinite alternate, nudge 6s linear infinite alternate;
      }
      @keyframes nudge {
        0%,
        100% {
          transform: translate(0, 0);
        }
        60% {
          transform: translate(150px, 0);
        }
        80% {
          transform: translate(-150px, 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="element"></div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Reproducir
time	Especifica la duración que tarda una animación en completar un ciclo. Los valores pueden especificarse en segundos (`s`) o milisegundos (`ms`). Tenga en cuenta que el valor predeterminado de la propiedad en sí es `0s`, no la palabra clave `time`.	Reproducir »
initial	Hace que la propiedad utilice su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuál es el papel de la propiedad CSS animation-duration y cómo se especifica?

La propiedad CSS animation-duration se utiliza para definir el número de segundos o milisegundos que tarda una animación en un ciclo completo.La propiedad CSS animation-duration se utiliza para establecer el color de la animación en CSS.La propiedad CSS animation-duration se especifica en porcentajes.La propiedad CSS animation-duration se especifica en segundos (s) o milisegundos (ms).La propiedad CSS animation-duration es responsable de definir la dirección de la animación en CSS.

Propiedad animation-duration de CSS ​

Sintaxis ​

Ejemplo de la propiedad animation-duration: ​

Ejemplo de la propiedad animation-duration con una duración de 6 segundos: ​