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
transiciones-y-transformaciones-css_8955c7f8-93a1-4b22-b926-2c00936642b2.pdf
Ayudan a reducir la carga cognitiva, y generar atención en espacios realmente importantes.
Los seres humanos tratamos de conectar absolutamente todo, con animaciones podemos facilitar la comunicación entre diferentes objetos.
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.
Todas las animaciones que creemos deben comunicar de la misma manera. Debe haber coherencia cuando creamos las animaciones.
Nos ayudan a reducir la cargar cognitiva, nos ayudan a comunicar y también a expresar muchas cosas.
Permite modificar elementos CSS (rotar, cambiar tamaño, mover de posición, etc).
Desplazar elementos de un punto inicial a un punto final, pero no puede suceder nada en el trayecto del inicio hasta el fin.
Desplazar elementos de un punto inicial a un punto final, y puede existir cambios durante la trayectoria del inicio hasta el fin.
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
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; }
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; }
Es la forma de representación que tience CSS para generar las aceleraciones de un cambio a nuestro elementos.
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
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.
https://codepen.io/mazzaroli/pen/eYWmQPq
<aside> 💡 las funciones de transformación no son aplicables a elementos inline, para que no se rompan la cabeza tratando de transformar elementos span, a, etc… sin antes darles un display inline-block o block xD
</aside>
suponiendo que tenemos un elemento padre con position: relative; y un elemento hijo con position: absolute…
Para centrarlo usaremos transform y las propiedades top y left! ¿Cómo? Simplemente hay que decirle al elemento hijo que se muevan 50% en su top y su left:
Todavía no está centrado… Aquí es donde podemos usar transform. Tanto en X como en Y se mueva -50% para quedar centrado
