CSS ayuda a animar elementos HTML sin usar JavaScript. Puede reproducir y pausar la animación aplicada a los elementos HTML utilizando la propiedad animation-play-state de CSS.
La propiedad animation-play-state tiene 2 valores:
- pausado : pausa una animación en curso.
- running : inicia una animación en pausa (valor predeterminado).
Sigue estos pasos :
- Crear archivo HTML
- Crear archivo CSS:
- Especifique la propiedad de posición para la etiqueta <div> .
- Usa la propiedad animation para mencionar la animación que quieres darle a la etiqueta <div> .
- Utilice la propiedad animation-play-state para reproducir/pausar la animación.
- Mencione las propiedades de los fotogramas clave ‘ desde’ y ‘ hasta’ para mencionar el inicio y el final de la animación.
Ejemplo 1: código HTML y CSS para reproducir la animación.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
animation: geeks 5s infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
@keyframes geeks {
from {
left: 0px;
}
to {
left: 100px;
}
}
</style>
</head>
<body>
<p>
Hover over the GeeksforGeeks
to run the animation.
</p>
<div>GeeksforGeeks</div>
</body>
</html>
Producción:
Reproducir animación cuando se desplaza
Ejemplo 2: código HTML y CSS para pausar la animación.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
animation: geeks 5s infinite;
}
div:hover {
animation-play-state: paused;
}
@keyframes geeks {
from {
left: 0px;
}
to {
left: 100px;
}
}
</style>
</head>
<body>
<p>
Hover over the GeeksforGeeks
to stop the animation.
</p>
<div>GeeksforGeeks</div>
</body>
</html>
Producción:
Pausa la animación cuando se desplaza
Publicación traducida automáticamente
Artículo escrito por meetmavani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA