La propiedad animation-delay en CSS se usa para especificar el retraso para el inicio de una animación. El valor del retraso de la animación se define en segundos (s) o milisegundos (ms).
Sintaxis:
animation-delay: time|initial|inherit;
Valores de propiedad:
- tiempo: Este valor es opcional. Se utiliza para definir la cantidad de segundos (s) o milisegundos (ms) que se esperará antes de que comience la animación, es decir, la cantidad de tiempo que se retrasará la animación. El valor predeterminado es 0. Se permiten valores negativos. Si se usa un valor negativo, la animación comenzará como si ya se hubiera estado reproduciendo durante N segundos/milisegundos.
- initial: este valor se utiliza para establecer la propiedad en su valor predeterminado.
- heredar: este valor se utiliza para heredar la propiedad de su elemento principal.
Ejemplo: programa HTML para ilustrar la propiedad de retraso de animación CSS.
<!DOCTYPE html>
<html>
<head>
<title>
CSS | animation-delay Property
</title>
<style>
.geeks {
font-size: 40px;
text-align:center;
font-weight:bold;
color:#090;
padding-bottom:5px;
font-family:Times New Roman;
}
.geeks1 {
font-size:17px;
font-weight:bold;
text-align:center;
font-family:Times New Roman;
}
#one {
animation-name: example;
animation-duration: 10s;
}
#two {
animation-name: example;
animation-duration: 10s;
animation-delay: 10s;
}
@keyframes example {
from {
background-color: orange;
}
to {
background-color: white;
}
}
</style>
</head>
<body>
<div class = "geeks">
GeeksforGeeks
</div>
<div class = "geeks1">
A computer science portal for geeks
</div>
<!-- Animation of below h2 tag is not delayed
and begins as soon as the page is loaded
in the browser -->
<h2 id="one">
Text animation without delayed.
</h2>
<!-- The animation of below h2 tag is delayed for 10s
That is, it begins after 10s of successfully
loading of the current page -->
<h2 id="two">
Text animation with 10 second delay.
</h2>
</body>
</html>
Producción:
Navegador compatible: los navegadores compatibles con animation-delay se enumeran a continuación:
- Google Chrome 43.0
- Internet Explorer 10.0
- Firefox 16.0
- Ópera 30.0
- Safari 9.0