Continúa en el Curso de Animaciones con CSS

¡Genial! Me encantó el curso, podemos empezar a jugar con las animaciones en nuestros elementos HTML 😄
.
Podemos aplicar transiciones a cualquier propiedad que tengamos, por ejemplo, a algún botón que cambie de color cuando se hace un hover, ¡es animable!
.
Adicionalmente, hice este video hace algunos días sobre cómo usar transiciones para crear un formulario animado. Es básicamente un formulario que inicia siendo un circulito y se abre dando una vuelta al hacerle click a un botón jaja, por si a alguien le interesa aquí se los dejo 👀
.

¡Un curso maravilloso!

Realmente hay miles de cosas que no sabia y ahora podre aplicar cada vez que sea necesario.
.
¿Qué fue lo que mas me gusto?
.
Me gusto muchísimo la parte de optimización ya que muchos de nosotros tenemos problemas al hacer este tipo de cosas y que nos puedan salir bien a la primera. 😅
.
Finalmente muchas gracias a Estefany y platzi por hacer estos cursos tan prácticos y esenciales.

Me encanto el curso 💙💙💙

Me gusto mucho la parte de optimización (porque pensaba que las animaciones eran geniales pero costosas y resulta que depende de las propiedades que se use).

Además me gusto mucho el menú desplegable y efecto parallax porque se aplicó lo aprendido a algo mientras se aprendían cosas nuevas 💙💙💙

Estefany definitivamente es de mis profesoras favoritas de todo el mundo 💙💙💙💙💙💙💙💙💙

Mis Conclusiones Del Curso

Las transformaciones: son cambios físicos (trasladarse, rotar, aumentar o reducir su tamaño, etc.) que les ocurren a los elementos del DOM desde un punto A a un punto B. Para hacer transformaciones a un elemento usamos la propidad transform la cual recibe funciones como: translate(), skew(), rotate(), scale(), matrix().

Existen propiedades relacionadas con el transform que nos ayudan para lograr el mismo proposito como: transform-origin, transform-style, transform-box, perspective, y perspective-origin

Transiciones: estas nos ayudan a configurar lo que pasa desde un punto A hacia un punto B, pero estas a diferencia de la propiedad Animation solo podemos controlar lo que pasa desde esos puntos no durante esos puntos, me explico: no a mitad , no a 40%, no a 70% solo desde 0% a 100%. Puede sonar que me contradigo pero por ejemplo: con transition digo desde A-B iras desde 0px a 40px en X, pero con Animation puedo decir desde A-B iras desde 0px a 40px en X y en 30%-60% de la animation iras desde 0px 20px en el eje Y.

La propiedad transition nos ayuda a controlar el tiempo de la animación (transition-duration) , el tiempo de retraso (transition-delay), la velocidad de la animación (transition-timing-function), y las propiedades las cuales se quiere animar (transition-property).

La Accesibilidad
Para que nuestras animaciones sean accesibles debemos tener en cuenta aquellas personas que no puden ver cambios fuertes o les molestan tales movimientos por lo cual debemos de tener un media query: @media(prefers-reduced-motion: reduce) el cual cuando active su opción de motion reduce del navegador nuetras animaciones se adapten para evitar esos movimientos bruscos.

Optimización
Para optimizar nuestras animaciones debemos saber que hay propiedades que pasan por más procesos que otras por la cual estas van hacer más costosas a nivel de recursos de nuestro computador. Por ejemplo la propiedad height al actualizarse necesita pasar por: layout, paint, y composite mientras que background color solo por paint y composite, mientas que transform y opacity solo por composite. También podemos hacer que el navegador optimize nuestras animaciones usando Will-change indicandole las propiedades que van a cambiar.

Recomiendo el E-book CSS Animations 101, es gratis.
https://cssanimation.rocks/css-animation-101/

Honestamente me encantó! El detalle es que, están desarrollando los cursos básicos, para luego poner uno práctico.
Es un curso muy “coloquial”, al momento de explicar la creación de animaciones. Además, la historia detrás ( Alícia).
Gracias Platzi!
Gracias, señorita Estefany.

Excelente contenido del curso !! 😄 , aprendí cosas que siempre me pregunte como se hacían’¿? , ahorra lose 😃

Super recomendado para quien quiera iniciar en este mundo del css con transiciones y animaciones…

Un excelente curso para sacarle provecho y hacer nuestra web más interactiva. Habían cosas que siempre me preguntaba como hacerlas ahora tengo los conocimientos necesarios para ponerlos en practica.

Grande las cosas que se puede hacer con CSS, me quedo con grandes conocimiento para aplicar en un montón de aplicaciones que pensé que tenia que hacer con video. Usare estos poderes con responsabilidad. Muchas Gracias 😄 !!!

Muchas gracias por el curso, muy interesante y se que se complementara con el que sigue de animación. Gracias

Excelente curso, estuvo increíble.

epa, que buen curso :

Este curso ha sido divertido e interesante. Me encantó desde las explicación de la animacion hasta los ejemplos y las referencias a Alicia ❤️

Totalmente recomendado :3 Aprendi mucho y me siento feliz

Muy bueno, repase algunos conceptos y me ayudo mucho. Genial la Teacher… las explicaciones super geniales

Felicitaciones, Que curso tan digerible, simplemente maravilloso. cuidó de todos y cada uno de los detalles.

Un aplauso! Me desmotivó ver su nombre al inicio por la experiencia de cursos anteriores pero definitivamente cambiaron mi opinión, se nota una mejora enorme de la metodología para dar el curso vs los anteriores de Estefany. Se cuenta con espacio para explicar el concepto, dar el código para realizar el ejemplo, se apoya con cheat sheet y se agregó el elemento de Storytelling.
Gracias por el cambio, un curso muy recomendable 😃

Super satisfecho con todo lo aprendido, creo que la profe siempre debe afinar un poquito mejor su preparacion antes de los cursos, sin embargo toda la saga de diseño web con ella aqui en Platzi es realmente buena si ponemos de nuestra parte a practicar. 😃

todo super genial pero !!! y el nombre de la extension que hace que algunos elemetos brillen ???
esta buena no ?

Repositorio

Les adjunto el repositorio con los códigos del curso y un pequeño proyecto con la mayoría de elementos vistos.

Muy Buen curso donde se muestra lo básico en animaciones de css, lo mejor es que ya pasaron dos años y siguen siendo tan útiles
Buen curso

increíble curso, aprendí nuevas cosas, mi parte favorita es el efecto parallax. Muchas gracias.

¡Un curso excelente 100% recomendable!

lpm que buen curso

Como dice la profe es un pequeño abrebocas, pero nos dá lo suficiente para adentrarnos en el mundo de las animaciones con CSS. Muy buen curso

I learn a lot with this course.
Thanks you so much
I learn more about transitions
I learn about speeds
and more

👏 Muy buen curso. Algunos errores por ahí que pudieron volver a grabar, pero estuvo rápido lleno de cosas nuevas.

Seis estrellas ❤️

Me gustó mucho el curso, la verdad me hacía mucha ilusión aprender de transformaciones y transiciones ya que Flex y Grid puedo decir que ya los domino pero me faltaba ver ya estos temas que le pueden dar un toque súper profesional a los diseños web y su importancia a tener en cuenta cuando se utiliza.

Me encanto el curso! 💚
Sin duda la parte que más me gusto fue el tema de transition, ya que fue donde empezamos a darle vida a los elementos

Es un curso ameno con ejemplos sencillos salvo el de parallax. La mayoría de los ejemplos son correctos. No tiene un acabado conocimiento del uso de backface-visibility ya que en la lección de movimientos reducido utiliza backface-visibility y opacity, si usa uno el otro no tiene sentido, pienso que el problema está en que como no pudo resolver el problema con backface-visibility utilizó opacity. El ejemplo de parallax tiene errores por eso no funciona y por eso no puso el HTML para descargar, se nota que los ejemplos que realizaron los alumnos han corregidos los problemas.

me parecio super interesante porque hay muchas animaciones que veia y me gustaba hacer, creo que ahora podre hacer alguno de esos UwU

Es de muchísimo valor que el curso fluya y se disfrute. Esto Teff Code lo logra al 100%, gracias a sus dinámicas y comparativas, en este caso con la película de Alicia en el País de las Maravillas

estuvo bastante entretenido el curso y se pasó muy rápido, sinceramente creí que serían más difíciles las animaciones pero en general me resultó sencillo, es cuestión de practicar y con el tiempo solo sale. Gran maestra también