Al diseñar un sitio web, generalmente se utiliza JavaScript para definir el comportamiento de las páginas web. Pero hay formas que nos ayudan a definir cierto comportamiento para la página usando CSS. Uno de esos comportamientos es la animación. Las animaciones CSS son los métodos que nos ayudan a cambiar el comportamiento y la apariencia de una página web sin usar JavaScript. Definen la apariencia de los elementos para diferentes intervalos de tiempo, mostrando así una animación.
Definición de la duración de la animación: para usar una animación CSS, debemos definir el intervalo de tiempo durante el cual el CSS mostrará diferentes apariencias. Para hacer esto, tenemos la propiedad animation-duration que establece el intervalo de tiempo que tarda la animación en completar un ciclo.
Sintaxis:
animation-duration: (time in seconds);
A continuación se muestran los ejemplos que ilustran el uso de la duración de la animación.
Ejemplo: ahora crearemos una animación que cambia de color. Primero vamos a crear nuestro archivo HTML que contendrá un texto para el que queremos aplicar una animación.
index.html
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Animation example</title> <!-- This line defines the css styles file to be used --> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1 id="mainh1">GeeksforGeeks</h1> </body> </html>
Ahora que nuestro archivo HTML está listo, podemos definir nuestros estilos y animaciones en el archivo CSS. Usaremos la propiedad animation-duration que cambiará el color de nuestro encabezado en 5 segundos para este ejemplo.
Código CSS: tenga en cuenta que hemos creado una animación personalizada con el nombre ‘cambio’ aquí. Para aprender a crear una animación CSS, consulte este artículo .
Lo principal a notar aquí es que hemos definido la duración de la animación en 5 segundos. Significa que el color del texto del encabezado debe cambiar de verde a rojo en 5 segundos.
style.css
#mainh1{
animation-name: change;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes change {
from {
color: green;
}
to {
color: red;
}
}
Código completo:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<style>
#mainh1{
animation-name: change;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes change {
from {
color: green;
}
to {
color: red;
}
}
</style>
</head>
<body>
<h1 id="mainh1">
GeeksforGeeks
</h1>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por greenblade29 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA