Aprende Animaciones con CSS y Scroll Animations sin JavaScript

[@bacikdev]

Estos videos deberían venir con certificados. Se aprende mucho mejor y más rápido que en muchos cursos certificados.

[@Sebastian-eo4um]

Mucha gente cobra por esto y no tienen tanta dedicación, eres grande midu... Gracias por tu aporte a la comunidad

[@sredito6021]

Increíble como puedes explicar sin que parezca como un profesor señor mayor de universidad que te pega toda la chapa y al final no entiendes nada xD pero a su vez si que lo explicas todo detalladamente y lo importante de las cosas a tener en cuenta. No se lo explicas todo de una manera muy dinámica y de los pocos que puedo tirarme 3h de videos enteras sin saltarme nada y se me pasan rápido. Debemos valorar mas estos videos, unas joyas para los que estamos aprendiendo programación, gracias por tu dedicación! 💯👌

[@brandonmanuelventuraumana1035]

Con el tema del rendimiento, en la mayoría de los casos no van a notar ningún problema en las animaciones desde una computadora, como recomendación, si realmente quieren saber si la animación tiene buen rendimiento, véanla desde el móvil, ya que estos dispositivos típicamente tienen recursos más limitados. Los navegadores siempre intentarán utilizar la GPU para mejorar el rendimiento (por defecto las animaciones CSS se almacenan en la GPU), pero esto depende de las propiedades que se estén animando; la GPU de alguna manera tiene que enterarse de que es lo que debe hacer con los elementos para animarlos, y esto lo sabe gracias a la comunicación que el navegador realiza entre la CPU y la GPU; en general, la GPU es muy buena para manipular propiedades que tengan que ver con la composición de los elementos como las transformaciones, o la opacidad (opaco/transparente), y esto ocurre porque cuando la animación es cargada, la CPU procesa los elementos del DOM que serán animados generando texturas que son enviadas a la GPU, luego posteriormente la GPU ya tiene las texturas y los comandos para ejecutar la animación y solamente la procesa, existiendo una comunicación mínima entre la CPU y la GPU. Por el contrario, si modificamos propiedades del layout (width, height, margin, etc) o del pintado (background-color, color, etc) esto significa que el objeto ha cambiado, por lo tanto, la textura debe ser recreada, lo que fuerza una comunicación constante entre la CPU y la GPU, dañando el rendimiento no solo de la animación sino que de la página también y los elementos que rodean los objetos que están cambiando (Style Recalculation, reflows y repaints) afectando así en su mayoría a todo el DOM. Para el siguiente HTML: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam dolore dolor modi similique obcaecati soluta necessitatibus odio facere ducimus. Eligendi natus voluptas pariatur, animi dolorum eum obcaecati molestias? Laborum, et? Las siguientes dos animaciones técnicamente harían lo mismo: Con transformaciones: div{ margin: 100px; width: 100px; height: 100px; background-color: red; animation: animate 1s infinite; transform-origin: top left; } @keyframes animate{ to{ transform: scale(2); } } Con propiedades del layout: div{ margin: 100px; width: 100px; height: 100px; background-color: red; animation: animate 1s infinite; } @keyframes animate{ to{ width: 200px; height: 200px; } } Sin embargo, en la segunda animación (con layout) veremos que el párrafo se mueve cada vez que se ejecuta la animación (Style Recalculation, reflow y repaint), los cálculos para actualizar la animación en cada frame son efectuados por la CPU y nada más están listos los objetos son enviados a la GPU para que esta pueda animar ese frame en específico. Aunque podemos posicionar el elemento con absolute o fixed, incluso promoverlo a una nueva capa (will-change, translateZ(0)) puede que se optimice la comunicación CPU-GPU así como evitar afectar los elementos que los rodean (los elementos salen del flujo del navegador, stacking context, etc) pero los cálculos de las propiedades del elemento siempre se realizaran en la CPU.

[@danteszumilo]

Grande midu, es real que no vi otro curso de este estilo en internet. Muchas gracias por tu magnifico aporte ❤ Saludos desde Argentina

[@midulive]

Gracias a ti!

[@josedanielmendoza2305]

Midudev, enserió te lo digo que tus videos son los únicos que me los como de principio a fin. Gracias, hoy aprendí bastante ❤🎉

[@midulive]

😊😊😊

[@sol____-_-]

Justo estaba buscando explicación de estos temas y éste vídeo es una joya. No sé qué haríamos los autodidactas sin contenido como éste, ya que no solo explicas súper bien sino que también es muy entretenido todo y el tiempo ni se siente. Muchas por todo. 💛🇨🇴

[@devvvolf]

me vi los 4 videos en un dia y fue la mejor inversion de tiempo de mi vida, aclare muchas cosas y aprendi nuevas muchas gracias midu

[@midulive]

Excelente!

[@facundoz8790]

yo aprendi bastante pero me olvide todo XD

[@IsZeera]

@@facundoz8790 por eso hay que practicar y tomar nota... es un lenguaje, es como aprender un nuevo idioma, si no practicas seguido, te vas a olvidar

[@maricarmensoriahurtado8521]

Gracias por todos tus videos y tu manera de compartir lo que sabes a personas como yo, que estamos empezando. gracias

[@alejandro_dom]

Pedazo de playlist CSS. Gracias por tomarte el tiempo de hacer este contenido esta muy bueno. Una de las cosas que más me gusta son las páginas que recomiendas son lo máximo

[@GabrielPozo]

Practicamente nunca toco CSS, pero con este video, casi que me dan ganas de hacerlo 😁 excelente video! 👏

[@Cristian_Aguilar060_oficial]

Wow literal bien explicado con ejemplo y gratis. mil y muchas gracias ser una gran persona 🎉

[@devroa]

Yo empecé a aprender hace una semana y esto es fantástico para mi portafolio.

[@destradar1]

Gracias amigo. Quisiera tener el conocimiento que tienes. Me ayudó. Ahora aplicaré este nconocimiento en mi página web.

[@codesthenos]

Muchas gracias por este curso he estado una semana y algo con los 4 videos de css y el de html, me ha servido muchisimo, mil gracias por todo, he aprendido mucho, aunque tengo que integrar los conocimiento obviamente ya que son muchisimos

[@stevenquihuire3523]

Muchas gracias Midu me vi todos los cursos de css y html y js no se que seguir espero saber que continuar mientras seguire practicando mucho! Gracias ♥

[@jhmcodedev]

Luche mucho para terminar de ver el video pensando que ya sabia todo de animaciones y al final aprendí mucho mas de lo esperado . Gracias Midu

[@leidyjohannasanchezzamora2300]

jajaja me encanta con la energia😃 que transmites la info, muchas gracias por compartirlo!

[@JorgeOmarAguilarFranco]

Pero que buen video acabo de ver! Necesitaba hacer una animacion y me estaba quebrando la cabeza! Gran contenido y super bien explicado

[@Wilfer_Suarez]

Muy bueno el curso me encanto y mas en KZbin para verlo en cualquier momento

[@animatek6155]

Era el video que estaba esperando, dejo mi like, me voy a trabajar y lo veo en volviendo. Gracias Midu!!!

[@midulive]

Gracias a ti!!

[@cisormonki]

Quería estudiar acerca de esto justamente, y pum midu lo explica. Simplemente un crack tqm midu

[@midulive]

Gracias, Cesar!🤗

[@askyrox]

Uno piensa que lo sabe todo hasta que ve tus videos, gracias por tanto contenido informativo, educativo valioso y gratis!!

[@JohanDonadoBanderas]

Excelente contenido el que encuentro en este canal. Siempre hay algo nuevo que aprender, explicado de una manera genial.

[@OzcarCalle]

Definitivamente es el mejor de los mejores canales de yt en programación

[@midulive]

Muchas gracias!!!!

[@brad-ux]

Midu, bro! tus tutoriales no tienen desperdicio. Muchas gracias!

[@midulive]

Gracias, saludos!

[@Johandev-lp7tt]

Increíble todo el poder que nos has brindado Midu, eres grande. Muchas gracias, de verdad. Lo único que no me gusta es que algunas cosas sean experimentales y hasta la fecha no funcionen en todos los navegadores, pero bueno... Estarán trabajando para que esto sea posible más adelante.

[@rickkk226]

Es estupendo el concepto que utilizas siempre de explicar en detalle , para luego mostrar el shortcut. Coincido totalmente, es el modo de comprender lo que se está haciendo.

[@derekbravo4394]

Esta información no vale oro, vale diamantes, muchas gracias

[@midulive]

Gracias por comentar

[@santiagocorrea1599]

Midu, sos lo mas grande que hay! muchas gracias!

[@jorge_pb8482]

Q ricoo causaaaa!!!, justo hice recien ese efecto del final con js y me decia a mi mismo seria genial poder hacerlo con CSS nomás

[@fede5441]

Excelente curso midu!!! muchas gracias por tus videos!!👏👏👏

[@ai.charly]

Excelente contenido, Midu, felicidades por tu contenido, siempre mejoro con tus vídeos.

[@midulive]

Gracias, Charly! 🤗

[@TizianoMontenegro07]

muy muy bueno gracias Midu, la verdad que no lo conocía

[@bellosalcedooswaldo]

Joder midu que pasada de Curso es de lo mejor con el estilacho a millón

[@heykervargasfernandez7140]

Eres el mejor. ❤ Le has dado más vida y visibilidad a mí camino como programador. Por cierto, pensamos de una forma similar con respecto a querer saber el "por qué" de las cosas.

[@ColomBitcoin]

Excelente Midu, gracias por el curso. 👏

[@danielarapaseje6412]

aprendiendo de un grande entre gigantes, un titan

[@jordymorales6594]

Dios le page, sería posible que nos de otras 2 horas de CSS. Por Favor.

[@criptamas]

Definitivamente el programador del momento xd

[@carajoplus]

Primera vez que veo uno de tus videos y me encanto!!!

[@reynaga7571]

Que grande midu ahora hacer con su puglin de tailwind ❤❤

[@nachotello2465]

Midu solo puedo decir que te amo bro

[@cl3on482]

Que chimba que CSS ya tenga eso

[@vulcanobyte]

Platzi: Midu no hagas eso

[@yeremicarrion2684]

XDDDDD a chuparla Platzi, todo está en yutub 🧐

[@doteyee9644]

miduu eres el mejor!, de grande quiero ser como tú , un saludo desde Perú

[@codeale]

Era una noche aburrida, ahora no 🤩

[@midulive]

Y puntooo

[@droid-jr9940]

esta re good !!! para mi portafolio XD

[@BlakeSoze]

con esto de las animaciones, se podría hacer un dark mode de tu pagina web usando solo css? por ahora voy por el minuto 56 no se si responde a esto mas adelante pero tengo esa duda

[@faustinomera582]

¡Que chulada, muchas gracias!

[@lazarillomochilero]

¡¡ Gracias Midu por otro excelente contenido !!

[@midulive]

Gracias a ti!

[@ezequielmaggi]

Despues de este video me van a aumentar el sueldo con toda esta magia! GRACIAS MIDU por ayudarme a comer caliente!!!

[@elliotgaramendi]

Creo que todo elemento se puede animar, pero hay propiedades que no se pueden animar, en la doc dicen qué sí y qué no. Lo otro el function por defecto es ease no linear.

[@Andres-zg8yg]

eres un genio, muchas gracias

[@indalecioaponte3741]

Excelente tuto, y le sigo mi amigo.

[@Martin97perussini]

Excelente como siempre midu!

[@adolfotorres153]

Gracias Midu ❤

[@diegoimberti4398]

Luuu puuuto aaaaamo

[@pabloperez2251]

Te pasaste midu, sos el amo

[@Grar126]

Gracias midu que grande

[@elliotgaramendi]

Jajaja deberían prohibirlo jajaja muy buen curso, estos son los mejores para los avanzados, cuando nos actualizas de cosas nuevas!

[@galletasniper2584]

Muchisimas gracias por este conocimiento

[@teveoenlaweb]

Muchas gracias amigo ✌️

[@davidd.larred7238]

Grande midu muchas gracias por el contenido.

[@midulive]

Gracias a ti!

[@jonnathanbaculima4447]

Saludos midu..! Muchas gracias midu por el aporte a la comunidad de verdad muchas gracias..!!! Como puedo enviarte un regalo midu..! Saludos desde Ecuador..!

[@JonathanPerez-o1d]

te amo, gracias por el curso (づ￣ 3￣)づ

[@camilonore3256]

Eres el mejor midu

[@midulive]

🥲 gracias

[@siroZzzz]

Lo esperaba:DD

[@jarndev]

me estaba dando error el IntersectionObserver y luego me di cuenta de que midu había subido esto hacía 8 horas :'v

[@cordoobez]

En Crack el Midu...

[@MarusanYonamine]

Siempre Grande Midu

[@JulioVinachi]

😂1:33 otra explicación venezolana a lo natural hay coo😂

[@th3ja]

Sos un crack!

[@samuelgomez3485]

Que crack midu 🎉🎉

[@crisnarvaez7901]

gracias

[@markpineda5103]

Que mal que aun no este soportado por ningun navegador A esperar para poder usar esta belleza!!!

[@ema.mendoza]

Yo lo acabo de probar en edge y chrome y funciona genial

[@midulive]

Claro que está soportado por navegadores. De hecho un 60%. Lo explico en el vídeo, Mark.

[@rudyrojasgutierrez5098]

Hola Midu!, "¿Cuál es el teclado que actualmente utilizas o cuáles recomendarías para programar?"

[@midulive]

Te recomiendo que uses el que más te guste jajaja yo uso el Magic Keyboard.

[@MAOKMA_]

en otros tutoriales podrias dejar el codigo que escribes?, seria mas interactivo el ver tu codigo pero en nuestro pc, like, me vi todo el video

[@carlosterrazas8913]

gracias.

[@franciscoroldan4251]

Hola Midu. ¿Ha dejado de tener soporte animation-timeline? En Can i use no aparece ahora mismo a no ser que esté yo equivocado. Un saludo

[@juansesamdoval]

Ey midu disculpa una pregunta, como puedo hacer para que la transición de la galería solo se aplique 1 vez, es decir al hacer scroll hacia abajo y que ya luego al subir se vea como sería normalmente?

[@jeissonwee3736]

1:16:13 Si no les funciona "animation-timeline: scroll(root block);" para detectar el scroll vertical me sirvio usar solo "scroll(y)"...

[@maximoherrera557]

Para completar por favor muestran como hacer algunas transiciones entre páginas😂😂

[@David_juli0210]

Midu, cómo se llama el programa que usas para acercar algo que de lejos no se alcanza a ver, me parece muy interesante, está disponible para Windows?

[@dambedev]

1000 puntos!

[@diegoimberti4398]

9:57 puedes hacer una transición de 2s para el hover…. Pero al “regresar” que sea mas rápida ?

[@diegoimberti4398]

32:07 resuelto.!

[@midulive]

Jajaja eso te iba a decir! Que justo lo comentamos en el curso :)

[@diegoimberti4398]

@@miduliveya sabes lo que pienso de ti: LuPutoAmo

[@Zaga2.0]

Me inspiró para continuar con mi sitio web grande midu. Una pregunta para el selector :has() no está soportado en firefox hay alguna forma de que lo soporte?? Algun código js??

[@codeXavi]

Utilizar postcss para transformar css

[@Zaga2.0]

@@codeXavi sería con gulp para instalar las dependencia nv.. Y ya lo as probado te funcionó con has() xq leí algunos block y dicen q nada

[@midulive]

Justo ahora van a añadir soporte en la siguiente versión. Por ahora hay que usar PostCSS.

[@arielbiagio]

Hola midu! en el ultimo ejemplo de la animación de la galería, se podría animar solo una vez y que al volver a scrollear hacia arriba las imágenes queden con la opacidad de 1?

[@josepazmino842]

Intenté hacer la galería con Astro, pero la animación no funciona. En cambio, si solo utilizo HTML y CSS de forma normal, todo marcha bien. No estoy seguro si es necesario configurar algunas cosas en Astro.

[@MRPinas2100]

Papi midu ❤❤❤❤❤❤

[@marliote]

caramba, me siento mal por no pagar por un curso de tanta calidad

[@midulive]

Me puedes apoyar de muchas formas 🙂

[@marliote]

@@midulive dime cual donde hacerte llegar una donacion gg, twich?

[@mustaphabousellam746]

Excelente

[@javilopez4024]

Hola Gracias por subir el video, te acabo de descubrir!. Hace poco he acabado un master de diseño web (vengo de offline) pero me estoy viendo tus videos de html y css. Justo en el proyecto de master me hice el portfolio con unas barras (si, barras, perdón) que solo conseguí que se llenasen al cargar. con lo que explicas en las imágenes consigo que se llenen al hacer el scroll, pero... ¿alguien sabe como hacer que se comience la animación cuando se empiezan a ver? 🥴

[@nahi_i]

Cosulta. ¿¿Se puede llevar este codigo a wordpress?? Cuando ingreso a CSS no me toma los cambios. Algún consejo? No entiendo por qué en mi visual se ve perfecto y en wordpress no funciona.

[@Aficionado_al_ajedrez]

Se puede hacer en Astro ?

[@J-yr6vb]

Van a haber más cursos de CSS?

[@JosueLopez-qz2ig]

👏👏👏👏👏

[@josejuanperezgonzalez2974]

Hola buen día Midu, quisiera preguntarte si pudieras aconsejarme, yo se que ya no tra ajas en Udemy, lo que pasa que me compre un curso de JavaScript es el primer curso que compro online pero nunca me llego el link de descarga, únicamente me llego un Gmail con un número de pago GPA pero no me redireccionaron al curso en si. Será que pudieras ilustrarme porfavor. Gracias de antemano.

[@eMartin03]

me estás diciendo que perdí tiempo aprendiendo a usar GSAP, pudiendo hacer todo esto con CSS3?

[@jostinmadriz6823]

Midu no es por nada pero Alexcgdesing se le entiende un poco más bueno es que el es especialista en front