Propiedad CSS animation-duration
La propiedad animation-duration define el tiempo que tarda una animación en completar un ciclo. Consulta ejemplos y pruébalos tú mismo.
La propiedad animation-duration define la duración (en segundos o milisegundos) que tarda una animación en completar un ciclo. Un ciclo consiste en una única ejecución desde el fotograma clave 0% hasta el fotograma clave 100%; si la animación se repite, esta duración se aplica a cada repetición, no al tiempo total de ejecución. Con mucha frecuencia se utiliza la propiedad abreviada animation para establecer todas las propiedades de animación a la vez, pero definir animation-duration de forma individual resulta útil cuando se quiere cambiar solo el tiempo manteniendo el resto de la abreviatura intacta.
El valor predeterminado es 0s, lo que significa que la animación se completa de forma instantánea y los fotogramas clave no tienen efecto visible. Esta es la razón más común por la que una animación "no funciona": la regla @keyframes y animation-name son correctas, pero no se estableció ninguna duración. Una animación siempre necesita una duración distinta de cero para ser visible.
Los valores negativos no son válidos y hacen que la propiedad sea ignorada (algunas implementaciones anteriores pueden tratarlos como 0s). Si deseas un inicio retrasado, usa animation-delay: un valor negativo en ese caso sí es válido e inicia la animación a mitad de su ciclo.
Cómo la duración se combina con otras propiedades de animación
La duración es solo una parte de una animación. Trabaja en conjunto con:
- animation-name — qué regla
@keyframesejecutar (necesaria para que suceda algo). - animation-timing-function — la curva de velocidad dentro de la duración (
ease,linear, etc.). - animation-iteration-count — cuántas veces se repite la duración (
infinitepara bucles sin fin). - animation-delay — cuánto tiempo esperar antes de que comience el primer ciclo.
Por ejemplo, animation: pulse 2s ease-in-out 3 ejecuta los fotogramas clave pulse tres veces, con cada ciclo durando 2 segundos, para un total de 6 segundos de movimiento.
Cuando se especifican múltiples 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 duraciones que nombres, los valores extra se ignoran; si hay menos, la lista vuelve al inicio y se repite desde el principio. Por ejemplo, con dos nombres de animación y animation-duration: 1s, 2s, 3s, el tercer valor se descarta; con animation-duration: 1s, ambas animaciones usan 1s.
Segundos versus milisegundos
1s y 1000ms son equivalentes: usa el que resulte más claro. Los milisegundos son convenientes para transiciones cortas de interfaz (250ms), los segundos para movimientos en bucle más largos (6s). La unidad es obligatoria: animation-duration: 2 (sin unidad) es inválido y la declaración se descarta.
La propiedad animation-duration es una de las propiedades CSS3.
| Valor inicial | 0s |
|---|---|
| Se aplica a | Todos los elementos, pseudoelementos ::before y ::after. |
| Heredada | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.animationDuration = "4s"; |
Sintaxis
Sintaxis de la propiedad CSS animation-duration
animation-duration: time | initial | inherit;Ejemplo de la propiedad animation-duration:
Ejemplo de la propiedad CSS animation-duration con segundos
<!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>Ejemplo de la propiedad animation-duration con una duración de 6 segundos:
Ejemplo de la propiedad CSS animation-duration con 6 segundos
<!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;
}
@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>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| time | Especifica la duración que tarda una animación en completar un ciclo. Los valores pueden expresarse en segundos (s) o milisegundos (ms). Nótese que el valor predeterminado de la propiedad es 0s, no la palabra clave time. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado (0s). | |
| inherit | Hereda la propiedad de su elemento padre. |
Compatibilidad con navegadores
animation-duration es compatible con todos los navegadores modernos. No se hereda y no es en sí misma animable: cambiar la duración a mitad de una animación reinicia el tiempo en lugar de interpolarlo.
Propiedades relacionadas
- animation — la abreviatura que establece la duración junto con el nombre, el tiempo, el retraso y más.
- animation-name — nombra la regla
@keyframesa ejecutar. - animation-delay — retrasa el inicio de la animación.
- animation-iteration-count — repite la duración un número determinado de veces.
- animation-timing-function — da forma a la curva de velocidad dentro de la duración.
- animation-fill-mode — controla los estilos antes y después de que se ejecute la animación.