Animation on Commentary of Takao

Transiciones de página suaves con View Transitions API

Sat, 05 Apr 2025 00:00:00 +0900

Introducción

La View Transitions API permite al navegador capturar estados de la página antes y después de una modificación del DOM, ejecutando una transición acelerada por hardware.

Configuración básica (SPA)

Envuelve tu función de actualización DOM en document.startViewTransition(). El navegador captura los estados saliente y entrante, ejecutando un crossfade de 0.25 segundos por defecto.

Personalización CSS

::view-transition-old(root) { animation: 0.3s ease-out both slide-out; }
::view-transition-new(root) { animation: 0.3s ease-out both slide-in; }

Crea transiciones de deslizamiento, fundido, o cualquier animación personalizada.

Animaciones CSS basadas en scroll: El futuro de los efectos de desplazamiento

Tue, 25 Jun 2024 00:00:00 +0900

El problema de los eventos scroll en JavaScript

Los efectos basados en scroll tradicionalmente usaban listeners de JavaScript en el hilo principal, causando jank y mala experiencia. CSS Scroll-Driven Animations mueven el tracking al compositor thread.

Conceptos clave

scroll-timeline vincula una animación a la posición de scroll. view-timeline la vincula a la visibilidad de un elemento. animation-timeline asigna una animación a un timeline.

Scroll Progress Timelines

.progress-bar { animation: fill-progress linear; animation-timeline: scroll(); }

La función scroll() crea un timeline anónimo en el contenedor de scroll más cercano.