La animación se produce moviéndose gradualmente de un
conjunto de estilos CSS al otro. Podemos modificar el conjunto de estilos
CSS varias veces durante la animación. Defina si la transición de estilo
ocurrirá en porcentaje o con las palabras clave "desde" y
"hasta", que son lo mismo que 0 % y 100 %. El 0 % es el comienzo
de la animación y el 100 % es la finalización de la animación.
Sintaxis
La sintaxis para CSS @keyframes se
puede escribir como se muestra a continuación:
@keyframes name_of_animation {keyframes-selector {CSS style
here…}}
Cuando una regla de fotogramas
clave no define el estado inicial o final de la animación (es decir, 0% desde y
100% hasta), los navegadores pueden usar los estilos existentes del elemento
para el estado inicial/final. Podría usarse para animar un elemento de un
lado a otro desde su estado inicial.
Por ejemplo,
@keyframes background_color {
0% {
background-color: blue;
}
100% {
background-color: grey;
}
}
El 0% y el 100% son selectores de
fotogramas clave que especifican una regla de fotogramas clave para cada uno. Para
una regla de fotogramas clave, el bloque de declaración de fotogramas clave
consta de propiedades y valores.
DEMOSTRACIÓN
En
el espacio de nombre del proyecto damos click derecho y seleccionamos Add à New Items
En
la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos como
nombre del archivo “KeyframeAnimations.html”, para luego presionar el botón
Add.
Procedemos
a tipiar nuestro código
Establecemos
nuestra pagina web como la de inicio
Y verificamos página web:
Al
dar click en el botón
