Lemoncode TV

Animaciones CSS

Cuando hablamos de animaciones CSS, se viene a la cabeza un trozo de código que un diseñador ha realizado que tenemos que copiar y pegar...

¿Te has parado a pensar en cómo funcionan estas animaciones? ¿Sabías que unas buenas animaciones pueden ayudar a mejorar la experiencia de usuario de tu aplicación?

En esta miniserie, vas a poder tener una primera toma de contacto con las transiciones y animaciones CSS y un ejemplo de caso de uso.

Temario

Transiciones

Hay que entender la diferencia entre una transición y una animación CSS.

Las transiciones proporcionan un cambio de un estado A a un estado B, mientras que las animaciones dentro de CSS permiten modificar la apariencia y el comportamiento de un elemento en varios fotogramas claves que son conocidos como keyframes, y podrían ir de un estado A, B, C, D etc..

Las transiciones están limitadas a dos estados, y esto es algo que hacen que carezcan de cierta flexibilidad, pero al mismo tiempo son mucho más fáciles de utilizar que las animaciones.

Ver lección

Animaciones

Con las animaciones CSS podemos realizar animaciones web más potentes que con las transiciones, además el usuario no tiene que realizar ninguna acción para que se ejecute la misma, podemos, por ejemplo, indicar que se ejecute cuando se finalice la carga de una página, cuando se lance un script...

Ver lección

Caso práctico: animando un botón

Con las animaciones CSS podemos mejorar la experiencia de usuario dando feedback de manera efectiva y esto es muy importante, de esta manera le podemos proveer de la información que necesita para saber si sus acciones han tenido o no éxito.

Muchas veces nos encontramos con botones que no dan feedback, y éste es el elemento más crítico de una interfaz ya que es con lo que nuestro usuario va a poder interactuar y tomar decisiones.

Ver lección

¿Te apuntas a nuestro máster?

Si te ha gustado este mini tutorial y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.