No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Contin煤a en el Curso de Animaciones con CSS

20/20
Recursos

馃帀隆Lo has logrado! 馃檶 Completaste todas las clases del curso de Transformaciones y Transiciones en CSS.

鉂擲i a煤n no queda claro alg煤n tema, vuelve a revisar la clase o deja tu pregunta en la secci贸n de preguntas.

馃Ь Realiza la prueba del curso para recibir tu certificado y no olvides dejar tus 馃専 y tu comentario.

鉁 Comparte tu certificado en Twitter, estaremos gustosos de ver tus resultados.

馃摎馃摃 Te recomiendo el libro Val Head - Designer & Interface Animation Consultant, es de pago, as铆 que si puedes permit铆rtelo ser谩 una buena inversi贸n.

馃憠 Las transformaciones y transiciones son una parte de las animaciones de CSS, as铆 que contin煤a con el Curso de Animaciones en CSS.

Y por sobre todo, 隆Nunca pares de aprender! 馃挌

Contribuciones del curso creadas por Andr茅s Guano

Aportes 34

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

隆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 鈥渃oloquial鈥, 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

Excelente curso para entrar en el mundo de las animaciones, muy completo y ense帽a todo lo necesario para empezar a experimentar con las animaciones en CSS.

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