Aprende Animaciones con CSS y Scroll Animations sin JavaScript
HTML-код
- Опубликовано: 3 июл 2024
- Aprende sobre el fascinante mundo de las animaciones con CSS y cómo crear sorprendentes efectos de animación al hacer scroll (Scroll Animations), ¡TODO sin una sola línea de JavaScript!
▶ No te pierdas más directos en: / midudev
00:00:00 - Qué construiremos?
00:02:35 - 2 formas de hacer animaciones
00:03:00 - Transiciones
00:04:49 - :hover
00:07:41 - propiedad transition-duration
00:09:00 - Error común sobre las transiciones
00:09:49 - Diferentes estados
00:11:16 - Indicar que propiedades queremos animar
00:12:20 - El problema del transition all
00:14:03 - Transiciones Suaves con CSS
00:16:39 - steps() función
00:17:55 - cubic bezier + HACK
00:20:48 - Control de Tiempos en Transiciones CSS
00:26:33 - atajo de transition
00:29:07 - Qué propiedades podemos animar?
00:31:04 - Trucos de las transiciones
00:32:50 - tomar en cuenta la accesibilidad
00:35:31 - Animaciones
00:40:40 - Ejemplo 2 sobre Animaciones
00:47:30 - Ejemplo 3 sobre animaciones
00:49:51 - Dirección de una animación
00:51:36 - pausar las animaciones
00:54:47 - estado con animation-fill-mode
00:57:55 - atajo para las animaciones (animation)
01:02:44 - FPS
01:03:53 - preguntas de la comunidad
01:06:39 - Cómo afectan las animaciones al rendimiento?
01:07:45 - Animaciones con Scroll
01:09:16 - barra de progreso (progress bar)
01:13:17 - animation timeline
01:17:35 - Galería de imágenes
01:19:49 - Creando navbar para animarlo
01:23:50 - Rango de las animaciones
01:25:05 - Preguntas de la comunidad
01:27:09 - Animando galería
01:35:12 - Dónde aprender más? 
Наука
Mucha gente cobra por esto y no tienen tanta dedicación, eres grande midu...
Gracias por tu aporte a la comunidad
Estos videos deberían venir con certificados.
Se aprende mucho mejor y más rápido que en muchos cursos certificados.
muy muy bueno gracias Midu, la verdad que no lo conocía
Gracias por todos tus videos y tu manera de compartir lo que sabes a personas como yo, que estamos empezando. gracias
jajaja me encanta con la energia😃 que transmites la info, muchas gracias por compartirlo!
Uno piensa que lo sabe todo hasta que ve tus videos, gracias por tanto contenido informativo, educativo valioso y gratis!!
Yo empecé a aprender hace una semana y esto es fantástico para mi portafolio.
Excelente curso midu!!! muchas gracias por tus videos!!👏👏👏
Excelente contenido el que encuentro en este canal. Siempre hay algo nuevo que aprender, explicado de una manera genial.
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
¡Que chulada, muchas gracias!
Excelente Midu, gracias por el curso. 👏
Midu, sos lo mas grande que hay! muchas gracias!
Pero que buen video acabo de ver! Necesitaba hacer una animacion y me estaba quebrando la cabeza! Gran contenido y super bien explicado
Practicamente nunca toco CSS, pero con este video, casi que me dan ganas de hacerlo 😁 excelente video! 👏
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
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! 💯👌
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.
Excelente como siempre midu!
esta re good !!! para mi portafolio XD
Lo esperaba:DD
Gracias Midu ❤
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 ♥
eres un genio, muchas gracias
Muy bueno el curso me encanto y mas en RUclips para verlo en cualquier momento
Gracias midu que grande
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.
Muchas gracias amigo ✌️
Era el video que estaba esperando, dejo mi like, me voy a trabajar y lo veo en volviendo. Gracias Midu!!!
Gracias a ti!!
Primera vez que veo uno de tus videos y me encanto!!!
Midu, bro! tus tutoriales no tienen desperdicio. Muchas gracias!
Gracias, saludos!
Muchisimas gracias por este conocimiento
Joder midu que pasada de Curso es de lo mejor con el estilacho a millón
Excelente contenido, Midu, felicidades por tu contenido, siempre mejoro con tus vídeos.
Gracias, Charly! 🤗
Quería estudiar acerca de esto justamente, y pum midu lo explica. Simplemente un crack tqm midu
Gracias, Cesar!🤗
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
Gracias a este video dejare mi portfolio BIEN CHULO ! jajaja saludos desde argentina
Gracias amigo. Quisiera tener el conocimiento que tienes. Me ayudó. Ahora aplicaré este nconocimiento en mi página web.
Sos un crack!
Excelente tuto, y le sigo mi amigo.
Siempre Grande Midu
Midu solo puedo decir que te amo bro
Eres el mejor midu
🥲 gracias
Grande midu, es real que no vi otro curso de este estilo en internet. Muchas gracias por tu magnifico aporte ❤
Saludos desde Argentina
Gracias a ti!
¡¡ Gracias Midu por otro excelente contenido !!
Gracias a ti!
En Crack el Midu...
Que crack midu 🎉🎉
Definitivamente es el mejor de los mejores canales de yt en programación
Muchas gracias!!!!
Midudev, enserió te lo digo que tus videos son los únicos que me los como de principio a fin.
Gracias, hoy aprendí bastante ❤🎉
😊😊😊
Grande midu muchas gracias por el contenido.
Gracias a ti!
Definitivamente el programador del momento xd
Gracias Midu, te estás ganando el cielo de los desarrolladores.
🤗 jajaja gracias!!
miduu eres el mejor!, de grande quiero ser como tú , un saludo desde Perú
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.
aprendiendo de un grande entre gigantes, un titan
Excelente
gracias
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
1000 puntos!
Dios le page, sería posible que nos de otras 2 horas de CSS. Por Favor.
Que chimba que CSS ya tenga eso
Te pasaste midu, sos el amo
gracias.
Era una noche aburrida, ahora no 🤩
Y puntooo
Papi midu ❤❤❤❤❤❤
Esta información no vale oro, vale diamantes, muchas gracias
Gracias por comentar
👏👏👏👏👏
Luuu puuuto aaaaamo
Despues de este video me van a aumentar el sueldo con toda esta magia! GRACIAS MIDU por ayudarme a comer caliente!!!
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
Jajaja deberían prohibirlo jajaja muy buen curso, estos son los mejores para los avanzados, cuando nos actualizas de cosas nuevas!
Saludos midu..! Muchas gracias midu por el aporte a la comunidad de verdad muchas gracias..!!! Como puedo enviarte un regalo midu..! Saludos desde Ecuador..!
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?
jajajajaja crack
me estaba dando error el IntersectionObserver y luego me di cuenta de que midu había subido esto hacía 8 horas :'v
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.
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? 🥴
Para completar por favor muestran como hacer algunas transiciones entre páginas😂😂
Puedes hacer vídeos con HTML y animarlo con css.
Que mal que aun no este soportado por ningun navegador
A esperar para poder usar esta belleza!!!
Yo lo acabo de probar en edge y chrome y funciona genial
Claro que está soportado por navegadores. De hecho un 60%. Lo explico en el vídeo, Mark.
Hola Midu!, "¿Cuál es el teclado que actualmente utilizas o cuáles recomendarías para programar?"
Te recomiendo que uses el que más te guste jajaja yo uso el Magic Keyboard.
Se puede hacer en Astro ?
Van a haber más cursos de CSS?
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??
Utilizar postcss para transformar css
@@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
Justo ahora van a añadir soporte en la siguiente versión. Por ahora hay que usar PostCSS.
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?
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
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?
😂1:33 otra explicación venezolana a lo natural hay coo😂
Platzi: Midu no hagas eso
XDDDDD a chuparla Platzi, todo está en yutub 🧐
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.
Primero uwu
9:57 puedes hacer una transición de 2s para el hover…. Pero al “regresar” que sea mas rápida ?
32:07 resuelto.!
Jajaja eso te iba a decir! Que justo lo comentamos en el curso :)
@@miduliveya sabes lo que pienso de ti: LuPutoAmo
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.
caramba, me siento mal por no pagar por un curso de tanta calidad
Me puedes apoyar de muchas formas 🙂
@@midulive dime cual donde hacerte llegar una donacion gg, twich?
me estás diciendo que perdí tiempo aprendiendo a usar GSAP, pudiendo hacer todo esto con CSS3?
Midu, por que se me complica tanto hacer un login en Spring Boot sin usar Spring Security, y por que usando java puro con Eclipse, siendo que usando Java con Eclipse son mas carpetas
Y con Spring Boot el JpaRepository me da los metodos
Ni idea, no uso Spring Boot.
@Midu GRAAAAAACIAS! joputa yo si decía poque mi hover hacia ese salto si YO creía que lo estaba aplicando bine. Mano gracias por enseñar y explicar de la manera que lo haces.
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.
Quinto