v144 · CSS Animations

Progressive Reveal

A realistic article-list page where each card animates in as it enters the viewport. Uses animation-trigger: view() in Chrome 144; falls back to IntersectionObserver + a CSS class toggle everywhere else. Swap animation types and stagger delay live.

Feature detection: checking…
Animation: Duration: 0.5 s Stagger: 200 ms
Revealed: 0 / 0
Method: —
↓ Scroll to reveal articles
— end —
/* CSS — declare animation, leave trigger blank initially */
.card {
  animation-name: reveal-up;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-play-state: paused;

  /* Chrome 144: fire when element enters viewport */
  animation-trigger: view();

  /* Stagger each card */
  &:nth-child(2) { animation-delay: 100ms; }
  &:nth-child(3) { animation-delay: 200ms; }
}

@keyframes reveal-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── JS fallback (IntersectionObserver) ───────────────────── */
const io = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('io-visible');
      io.unobserve(e.target);
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.card').forEach(el => io.observe(el));

see also