Aprende Animaciones con CSS y Scroll Animations sin JavaScript

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!

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?

[Sebastian-eoum]

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

[bacikdev]

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

[sredito]

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! 💯👌

[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. 💛🇨🇴

[maricarmensoriahurtado]

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

[cisormonki]

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

[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

[leidyjohannasanchezzamora]

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

[GabrielPozo]

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

[animatek]

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

[josedanielmendoza]

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

[danteszumilo]

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

[ai.charly]

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

[OzcarCalle]

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

[brad-ux]

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

[brandonmanuelventuraumana]

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:
<body>
<div></div>
<p>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?</p>
</body>

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.

[JohanDonadoBanderas]

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

[TizianoMontenegro]

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

[devroa]

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

[askyrox]

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