Aprende Animaciones con CSS y Scroll Animations sin JavaScript
1,679Aprende 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: https://www.twitch.tv/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?