Ha habido un aumento en los sitios web animados en estos días. Escribir y ejecutar animaciones en una página web requiere el uso de fotogramas clave para establecer algún tipo de reglas para ese fotograma en el que se realiza la animación. Mientras escribimos las propiedades requeridas en los fotogramas clave, básicamente asignamos un valor que varía de 0% a 100%. El 0% indica el inicio de la animación y el 100% indica el final. Las palabras clave from y to which especifican desde qué nivel hasta qué nivel tenemos que ejecutar la animación al 100%.
El nombre del fotograma clave que enlaza con el selector se define mediante la propiedad animation-name . La propiedad de animación también se puede utilizar para definir el nombre como su primer atributo.
Sintaxis:
element-selector {
animation-name: name;
}
Los siguientes ejemplos demuestran cómo especificar el nombre del fotograma clave que se vincula al selector.
Ejemplo 1: Uso de la propiedad animation-name.
HTML
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background: #731897;
position: relative;
/* Using the animation-name property
to define the name of the animation */
animation-name: GFG;
animation-duration: 3s;
animation-iteration-count: 5;
}
/* Define the animation to be used */
@keyframes GFG {
0% {
top: 0px;
left: 0px;
background: #731897;
}
25% {
top: 0px;
left: 200px;
background: #E94848;
}
50% {
top: 200px;
left: 200px;
background: #51B43A;
}
75% {
top: 200px;
left: 0px;
background: #484EE9;
}
100% {
top: 0px;
left: 0px;
background: #731897;
}
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
This is animation effect
using @keyframes
</h3>
<div></div>
</body>
</html>
Producción:
Ejemplo 2: Uso de la propiedad de animación.
HTML
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background: #731897;
position: relative;
/* Using the animation property
to define all the parameters of the
animation */
animation: GFG 3s 5;
}
/* Define the animation to be used */
@keyframes GFG {
0% {
top: 0px;
background: #731897;
width: 200px;
}
100% {
top: 400px;
background: #E94848;
width: 600px;
}
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
This is animation effect
using @keyframes
</h3>
<div></div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por KrishnaKripa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA