En este artículo, veremos cómo usar la propiedad animation-delay en CSS. La propiedad animation-delay se utiliza para configurar las animaciones en las páginas web.
- La propiedad animation-delay nos informa sobre el retraso en el inicio de una animación.
- El valor del retraso de la animación se define en milisegundos (ms) o segundos (s).
- Su valor por defecto es 0 segundos.
- La propiedad es muy útil para hacer atractivas las páginas web.
Sintaxis CSS:
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.
Los siguientes ejemplos ilustran el uso de la propiedad animation-delay en CSS.
Ejemplo 1: en este ejemplo, usamos la propiedad de animación para agregar el efecto de animación y también usamos la propiedad de retraso de animación para agregar el retraso de tiempo en la animación.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
position: relative;
animation: lit 2s;
animation-delay: 2s;
}
@keyframes lit {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h3>
How to use animation-delay in CSS?
</h3>
<p>Animation will start after 2 sec.</p>
<h1>GeeksforGeeks</h1>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, usamos la propiedad animation-name para agregar el efecto de animación y también usamos la propiedad animation-delay para agregar el retraso de tiempo en la animación. También hemos usado la propiedad animation-iteration-count para agregar la iteración de animación.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.separation {
color: white;
animation-name: separation;
animation-duration: 2s;
animation-timing-function:
cubic-bezier(0.25, 0.1, 0.25, 3.0);
animation-delay: 2s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}
@keyframes separation {
0% {
letter-spacing: 1.2em;
color: orange;
}
100% {
letter-spacing: 0.1em;
color: green;
}
}
</style>
</head>
<body>
<h3>
How to use animation-delay in CSS?
</h3>
<p>Animation will start after 2 sec.</p>
<h1 class="separation">Geeks For Geeks</h1>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por priyanshugupta627 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA