Animaciones CSS con view timeline y animation timeline

Las animaciones en CSS ahora son más sencillas y accesibles gracias a características como view timeline y animation timeline. Estas herramientas permiten realizar animaciones atractivas en sitios web sin necesidad de JavaScript, reduciendo la carga de trabajo y mejorando el rendimiento del navegador.

¿Qué son view timeline y animation timeline?

Ambas propiedades de CSS ayudan a crear animaciones vinculadas con el desplazamiento (scroll). Dentro del entorno web, se utilizan principalmente para generar efectos visuales dinámicos mientras el usuario navega a lo largo de la página. Una implementación común es la aparición gradual del contenido a medida que haces scroll hacia abajo.

¿Cómo se configura una línea temporal básica?

Para empezar, debes crear un bloque HTML con contenido repetido, lo suficiente para activar el desplazamiento del navegador. Comúnmente, se utiliza un elemento con la clase espaciador con altura del 100 % del viewport height (vh) que posiciona inicialmente el texto fuera de la vista.

En CSS, primero define la animación usando keyframes:

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

La opacidad se especifica desde cero (invisible) hasta uno (completamente visible), mientras que translateY determina la posición vertical inicial y final durante la animación.

¿Cómo asociar la animación con el scroll?

Después, debes registrar la línea temporal en CSS asociada al desplazamiento vertical con view-timeline:

.texto {
  view-timeline-name: --aparecer-timeline;
  view-timeline-axis: block;
  animation-name: aparecer;
  animation-timeline: --aparecer-timeline;
  animation-range: entry 10% cover 30%;
  animation-fill-mode: both;
}

• view-timeline-name: define un identificador para la animación.
• view-timeline-axis: especifica el eje (vertical-horizontal) para la animación. block se utiliza para la animación vertical.
• animation-name: indica qué animación previamente definida ejecutará la acción.
• animation-range: decide cuándo inicia y termina la animación en términos porcentuales dentro del rango de visibilidad.
• animation-fill-mode: mantiene el estado final de la animación luego de ser ejecutada.

¿Cuáles son las ventajas principales?

Las funcionalidades view timeline y animation timeline simplifican el proceso de animación al prescindir de JavaScript. Los beneficios inmediatos incluyen:

• Mejor desempeño de la página.
• Facilidad y claridad al mantener el código exclusivamente en CSS.
• Optimización de recursos al renderizar animaciones directamente en la GPU del navegador.

¿Utilizarías estas características en tu siguiente proyecto web? ¡Cuéntanos tu experiencia con animaciones en CSS!