https://static.platzi.com/media/achievements/badges-animacion-css-03-4f2cd60d-e10b-4ea3-b5fe-1c3bc38e6970.png

Creditos de Aportes

@Cecilia Riveros

@Fabian Flores

@Camilo Torres camayo

@RetaxMaster

@Angel Millanir

@Yefri Enmanuel Encarnación Jiménez

@alepaper

@Juan David González Rodríguez

1️⃣Importancia de las animaciones web

transiciones-y-transformaciones-css_8955c7f8-93a1-4b22-b926-2c00936642b2.pdf

🍿5 razones para usar animaciones en la web

❤Las animaciones tienen beneficios para el cerebro

Ayudan a reducir la carga cognitiva, y generar atención en espacios realmente importantes.

🧡Las animaciones se comunican

Los seres humanos tratamos de conectar absolutamente todo, con animaciones podemos facilitar la comunicación entre diferentes objetos.

💛Las animaciones conectan contextos

Independientemente de la plataforma por la que entro (web o app), debo tener la sensación como usuario de que estoy en el mismo lugar.

💚Coreografía de UI

Todas las animaciones que creemos deben comunicar de la misma manera. Debe haber coherencia cuando creamos las animaciones.

💙Las animaciones llaman la atención

Nos ayudan a reducir la cargar cognitiva, nos ayudan a comunicar y también a expresar muchas cosas.

2️⃣Conceptos iniciales

🍿Propiedades para crear animaciones con CSS y propiedades animables

❤Transform

Permite modificar elementos CSS (rotar, cambiar tamaño, mover de posición, etc).

🧡Transition

Desplazar elementos de un punto inicial a un punto final, pero no puede suceder nada en el trayecto del inicio hasta el fin.

💛Animation

Desplazar elementos de un punto inicial a un punto final, y puede existir cambios durante la trayectoria del inicio hasta el fin.

💚Cheat Sheet

animaciones_5bda2325-fb2e-4060-9751-5863d226fcf1.pdf

transformaciones_en_2d_y_3d_d712736c-5368-4c9b-8827-331dc347d536.pdf

transiciones_2093f06d-4937-4ba1-999d-73e1b9a56cca.pdf

🍿Pseudo-clases y pseudo-elementos en las animaciones

❤Pseudo-clases

es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado.

Sintaxis

selector : pseudoclase { propiedad: valor; }

🧡Pseudo-Elementos

los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Siempre se escribe con dos puntos dobles

Sintaxis

selector :: pseudo-elemento { propiedad: valor; }

💛Lecturas Recomendadas

:disabled

:active

:focus

:hover

htmlcolorcodes

Pseudo-classes

Pseudo-elementos

🍿Timing functions, planos y ejes

❤Timing o easing functions

Es la forma de representación que tience CSS para generar las aceleraciones de un cambio a nuestro elementos.

🧡El contexto de apilamiento

El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Video

💛Planos y ejes

X se refiere a la posición horizontal, de izquierda a derecha, con la propiedad left, right de css

Y se refiere a la posición vertical, de arriba hacia abajo, con la propiedad top, bottom

Z se refiere a la posición, de adelante, hacia atrás o viceversa.

3️⃣Transformaciones en 2D y 3D

🍿Transform translate

🧡Centrar elementos con Transform

🍿Transform style y perspective