A fin de representar con dinamismo los elementos de
una página web, crearemos las animaciones
CSS en un documento, según las recomendaciones oficiales de este lenguaje. Cuando resaltamos una parte de una página web para captar con mayor rapidez la
atención del usuario, por desconocimiento de las animaciones, solo aplicamos
color al fondo, sin lograr el efecto deseado. Debido a ello, identificaremos
los pasos necesarios para agregar animaciones en un documento CSS.
El lenguaje CSS tiene un módulo
dedicado a las animaciones, por lo tanto, existen diversas opciones disponibles
para agregar mayor interactividad a una página web. Con las transiciones aplicamos propiedades para realizar
movimientos básicos, como por ejemplo, cambiar un fondo de color, sin embargo,
mediante las animaciones tenemos la posibilidad de aplicar más complejidad, y
mostrar objetos en movimiento, retrocederlos, adelantarlos con cierta velocidad,
o agregar una imagen más para lograrlo.
061-01_0807_ilu01.
Beneficios de transición y animación
Para la especificación de una
animación es necesario:
- Un bloque con
la pabara clave keyframes precedido
por el simbolo @, el nombre de la animación y dentro de las
llaves los tipos de animaciones a realizarse.
- Otro
bloque con el nombre de la clase o identificador único del elemento al cual
aplicaremos la animación, por lo tanto dentro de las llaves lo primero a
describir es el nombre del conjunto de instrucciones especificadas anteriormente;
luego agregamos como se van a realizar las animaciones.
061-01_0807_ilu02.
Bloque para especificar una animación
Tenemos diferentes opciones para
agregar las instrucciones de animación:
- 0%, para
el inicio de la animación, y aplicamos el background-color
en blue.
- 35% para
delimitar el avance donde el fondo cambia a red.
- 70% para
indicar el cambio a color black.
- 100% para
especificar el final donde el color será pink.
Como apreciamos a continuación,
también es posible iniciar con la palabra from
equivalente a 0, y to equivalente
a 100.
061-01_0807_ilu03.
Inicio de una animación
Es posible especificar más de una
propiedad en un porcentaje específico. Por lo tanto, en 35% además de cambiar
el fondo a color red, también
aumentará su tamaños 3 veces más.
061-01_0807_ilu04.
Varios valores en una propiedad de tiempo
Es una ventaja simplificar las instrucciones de animación con solo separar mediante comas
los porcentajes exactos en los cuales se aplicarán los cambios. Debido a ello,
tanto en el 35% de la animación como en el 80% cambia el fondo y aumenta
tamaño.
061-01_0807_ilu05.
Dos porcentajes para una instrucción de animación
Existe una variedad de propiedades
para especificar animaciones, entre las cuales están:
- Animation-name: para el nombre de la animación, y es
obligatorio.
- Animation-duration: para la duración de la animación, y es
obligatorio.
- Animation-timing-function: para la aceleración, en este caso constante
por el valor linear.
- Animation-iteration-count: para repetir la animación.
- Animation-direction: para el avance o reversa de la animación, en
este caso alternate para alternar de
inicio a fin, comenzando desde el inicio.
061-01_0807_ilu06.
Propiedades de la animación
Aunque realizamos pruebas con
fondo de imagen para comprender fácilmente, en el bloque de keyframes es posible agregar varias imágenes, o describir cualquier elemento para aplicarle
la animación.
Keynotes
- El lenguaje CSS tiene un módulo dedicado a
las animaciones, por lo tanto existen diversas opciones disponibles para
agregar mayor interactividad a una página web.
- Con las transiciones aplicamos propiedades
para realizar movimientos básicos, como por ejemplo, cambiar un fondo de color,
sin embargo, mediante las animaciones tenemos la posibilidad de aplicar más
complejidad, y mostrar objetos en movimiento, retrocederlos, adelantarlos con
cierta velocidad, o agregar una imagen mas para lograrlo.
- Para la especificación de una animación es
necesario: Un bloque con la pabara clave keyframes
precedido por el simbolo @, el nombre de la animación y dentro de las
llaves los tipos de animaciones a realizarse. Otro bloque con el nombre de la
clase o identificador único.
- Existe una variedad de propiedades para
especificar animaciones, entre las cuales están: Animation-name: para el nombre de la animación, y es obligatorio. Animation-duration: para la duración de
la animación, y es obligatorio. Animation-timing-function:
para la aceleración, en este caso constante por el valor linear.
RetoCrea una especificación de animacion CSS en un
documento, según las recomendaciones de este lenguaje. Previamente pide a un compañero
de elegirte el tipo de animación y el elemento de HTML al cual será aplicado.
¡Comparte el resultado final del reto en tu vKonnect!
Tiempo disponible: entre 15 y 30 minutos.
