Propiedad animation-delay de CSS
La propiedad CSS animation-delay especifica cuándo comenzará una animación. La animación puede comenzar más tarde, inmediatamente o saltar a un punto específico de la línea de tiempo (usando un retraso negativo).
La propiedad animation-delay es una de las propiedades CSS3.
El valor predeterminado es 0. Se permiten valores negativos. Cuando se utilizan valores negativos, la animación comenzará como si ya se hubiera estado reproduciendo durante N segundos/milisegundos.
Cuando se especifican varios valores separados por comas para una propiedad de animación, estos se repiten cíclicamente para coincidir con el número de animaciones definidas en animation-name.
Si los keyframes de una animación omiten el valor inicial, el navegador utiliza los estilos calculados del elemento en el momento en que comienza la animación.
| Propiedad | Valor |
|---|---|
| Valor inicial | 0s |
| Se aplica a | Todos los elementos, pseudo-elementos ::before y ::after. |
| Heredado | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.animationDelay = "1s"; |
Sintaxis
Sintaxis de la propiedad animation-delay de CSS
animation-delay: time | initial | inherit;Ejemplo de la propiedad animation-delay:
Ejemplo de la propiedad animation-delay de CSS
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #1c87c9;
position: relative;
animation: delay 5s infinite;
animation-delay: 3s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example</h2>
<p>Here the animation starts after 3 seconds.</p>
<div></div>
</body>
</html>Ejemplo de la propiedad animation-delay con un valor negativo:
Ejemplo de la propiedad animation-delay de CSS con valor negativo
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: delay 5s infinite;
animation-delay: -2s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example with negative value.</h2>
<p>Here, the animation will start as if it had already been playing for 2 seconds.</p>
<div></div>
</body>
</html>Ejemplo de la propiedad animation-delay especificada en milisegundos:
Ejemplo de la propiedad animation-delay de CSS con milisegundos
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #8ebf42;
position: relative;
animation: delay 5s infinite;
animation-delay: 200ms;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example in milliseconds.</h2>
<p>Here, the animation will start after 200ms.</p>
<div></div>
</body>
</html>Valores
| Valor | Descripción | Reproducir |
|---|---|---|
| time | Define la cantidad de segundos (s) o milisegundos (ms) que se deben esperar antes de que comience la animación. Es opcional. | Reproducir » |
| initial | Establece la propiedad en su valor predeterminado. | |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuál es la definición correcta de la propiedad CSS animation-delay?