Maquetación de Footers con Animaciones CSS

Este es un resumen de las propiedades de animation que hemos venido trabajando y para qué sirven:

Aquí pondremos el nombre de nuestra animación y poder referenciarla en los keyframes
animation-name: "name";
Aquí pondremos el tiempo que queremos que tarde nuestra animación.
animation-duration: "0.5s";
Este será el tiempo que se tendrá para retardar la animación.
animation-delay: 2.5s;
Este será el tipo de aceleración que aplicaremos a nuestra animación.
animation-timing-function: easy-in-out;
Este nos indicará que queremos que vuelva al estado inicial con “forwards”
animation-fill-mode: forwards;

HTML semántico y accesible

Este es un ejemplo de HTML semántico y accesible:

El ul como container le indicaría a un lector de pantalla que en esa sección se listan 3 elementos y los button que esos elementos son interactivos, en este caso abrirán un modal. También le ayuda al JS, por ejemplo en un eventListener, button interpreta la tecla enter como click también. Esto ayuda a personas que en determinado momento no dispongan de un mouse, puedan interactuar con los elementos.

Contribución creada con los aportes de: Sebastian Heredia Rojas y Obed Paz.