Animaciones CSS con View Timeline y Animation Timeline sin JavaScript

Las animaciones CSS mediante View Timeline y Animation Timeline permiten agregar atractivos efectos visuales en páginas web sin necesidad de JavaScript. Esta técnica facilita, especialmente, la aparición gradual del contenido al hacer scroll, mejorando la experiencia visual y la interacción del usuario.

¿Qué son View Timeline y Animation Timeline?

View Timeline y Animation Timeline son propiedades avanzadas de CSS pensadas para gestionar animaciones mediante una línea temporal definida. Con estas herramientas, es posible sincronizar animaciones directamente con el desplazamiento (scroll) del usuario, proporcionando efectos visuales dinámicos y sin JavaScript.

¿Cómo implementar animaciones con scroll sin JavaScript?

Para implementar esta técnica, es fundamental crear primero la estructura HTML y las reglas CSS adecuadas.

Crear la estructura HTML

La estructura básica está compuesta por elementos div que actúan como espaciadores y elementos de texto que se desean mostrar gradualmente al hacer scroll:

<div class="espaciador"></div>
<div class="texto">Este texto es el que va a aparecer con View Timeline y Animation Timeline.</div>
<div class="espaciador"></div>

La clase .espaciador facilita dejar espacio suficiente antes y después del texto, ubicándolo fuera del área visible hasta realizar scroll.

Definir los Keyframes en CSS

Los keyframes determinan cómo se llevará a cabo la animación:

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

Estos keyframes aseguran una transición suave del contenido desde transparente y desplazado, hasta completamente visible y en su posición original.

Aplicación del timeline de animación en CSS

A continuación, se crea el timeline y se asocia con la animación correspondiente:

.texto {
  font-size: 2rem;
  text-align: center;
  opacity: 0;
  view-timeline: --aparecer-timeline block;
  animation-name: aparecer;
  animation-timeline: --aparecer-timeline;
  animation-range: entry 10% cover 30%;
  animation-fill-mode: both;
}

.espaciador {
  height: 100vh;
}

El atributo view-timeline define la línea temporal vertical (block), y la propiedad animation-range especifica que la animación comience cuando el contenido entre en el 10% del área visible y finalice en el 30%.

¿Qué beneficios tiene animar con CSS en lugar de JavaScript?

El uso de animaciones basadas en CSS aporta ventajas claras y prácticas frente a JavaScript:

• Mayor rendimiento al depender únicamente del renderizado del navegador.
• Animaciones más fluidas y naturales.
• Reducción de la complejidad y cantidad de código.
• Fácil implementación y mantenimiento.

Estas características hacen que la animación mediante CSS sea una opción robusta para mejorar la interacción sin necesidad de depender de scripts complejos.

Te invitamos a experimentar y adaptar estos conceptos a tus proyectos web. ¿Te animas a compartir tu experiencia aplicando estas técnicas en comentarios?