Aprende Animaciones con CSS y Scroll Animations sin JavaScript
Si eres un desarrollador web, es probable que hayas oído hablar de las animaciones con CSS y las scroll animations. Estas técnicas te permiten añadir movimiento y dinamismo a tus páginas web, sin necesidad de utilizar JavaScript.
Las animaciones con CSS te permiten animar propiedades como el color, la posición, el tamaño y la opacidad de los elementos HTML. Puedes crear efectos de transición suaves y atractivos con tan sólo unas pocas líneas de código.
Por otro lado, las scroll animations te permiten activar animaciones cuando el usuario hace scroll en la página. Esto puede ser útil para captar la atención del usuario y mejorar la experiencia de navegación.
Si estás interesado en aprender más sobre estas técnicas, te animo a que explores algunos recursos en línea. Hay muchos tutoriales y ejemplos disponibles que te guiarán a través de la creación de animaciones con CSS y scroll animations sin JavaScript.
Una vez que domines estas técnicas, podrás añadir un toque de creatividad y originalidad a tus proyectos web. Y lo mejor de todo es que no tendrás que depender de librerías de terceros o plugins pesados para lograrlo.
Para completar por favor muestran como hacer algunas transiciones entre páginas😂😂
9:57 puedes hacer una transición de 2s para el hover…. Pero al “regresar” que sea mas rápida ?
Luuu puuuto aaaaamo
Saludos midu..! Muchas gracias midu por el aporte a la comunidad de verdad muchas gracias..!!! Como puedo enviarte un regalo midu..! Saludos desde Ecuador..!
No me funciona el polyfill 🙁
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? 🥴
👏👏👏👏👏
@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.
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
En Crack el Midu…
Practicamente nunca toco CSS, pero con este video, casi que me dan ganas de hacerlo 😁 excelente video! 👏
miduu eres el mejor!, de grande quiero ser como tú , un saludo desde Perú
Que chimba que CSS ya tenga eso
Van a haber más cursos de CSS?
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.
Muchas gracias amigo ✌️
¡¡ Gracias Midu por otro excelente contenido !!
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.
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
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.