Transiciones y Transformaciones CSS: Beneficios y Aplicaciones

En este curso implementaremos algo muy divertido para aprender al hablar de una película muy famosa, donde la protagonista se pregunta el por qué de varias cosas.

Justamente ese nuestro punto de partida ¿Por qué hacer animaciones?

• Tienen beneficios para el cerebro
• Comunican
• Conectan los contextos
• Generan una coreografía de UI
• Llaman la atención

1. Las animaciones tienen beneficios para el cerebro

Las animaciones permiten reducir el esfuerzo que hace el usuario al entrar a una página web con varios elementos, por consiguiente, elevamos la atención en lo más importante.

2. Las animaciones comunican

Las animaciones sirven para elaborar un hilo conductor que esté asociado a la vida real, caso contrario, puede generar confusión o frustración.

3. Las animaciones conectan los contextos

Las animaciones relacionan las características únicas de cualquier aplicación, independiente de la plataforma en la que se usa o el lenguaje que fue construido.

En conjunto con las imágenes y la tipografía, las animaciones son relevantes para que el usuario tenga la sensación de que está en el mismo lugar.

Por ejemplo, Platzi, independiente de la versión en Android, Apple o en la web, sus animaciones son las mismas haciendo que el usuario reconozca la aplicación.

4. Coreografía de UI

Las animaciones deben tener coherencia en el movimiento y la duración. Una pelota rebotando suavemente no transmite lo mismo que una pelota rebotando rápidamente.

5. Las animaciones llaman la atención

Esta es la intercepción de las razones anteriores, las animaciones reducen la carga cognitiva para comunicar y expresar varias situaciones de la vida real de manera ordenada, pensando en el futuro de aquello que estamos creando.

🎉¡Bienvenido/a al curso! Y acompañanos a este increíble mundo de “Alice in Animationland”.

Profesora: Estefany Aguilar ( Desarrolladora Frontend en La Haus )
Twitter: @teffcode

Codi.link es un editor de código para escribir HTML, CSS y JavaScript, y visualizar el resultado a tiempo real. A lo largo del curso observarás ejemplos con esta herramienta. Utilízalo para dañar o crear nuevos ejemplos que te ayuden a reforzar los temas aprendidos.

Contribuciones del curso creadas por Andrés Guano.