v146 · CSS · Animation · demo
Staggered Gallery
A photo grid where each card uses animation-trigger: view() to fire once as it enters the viewport — combined with animation-delay per column to create a natural stagger. The same layout with standard CSS animations would need an IntersectionObserver to add classes; animation-trigger needs zero JavaScript.
Chrome 146+ —
animation-trigger: view(). In older browsers all cards are immediately visible (the animation simply doesn't run — no hidden content, no broken layout).
Scroll down to see cards enter with a staggered reveal · click "Reset" to re-trigger the animations from the top
animation-trigger: view() — Chrome 146+
No trigger — always visible (standard CSS)
/* Staggered scroll-triggered reveal — Chrome 146 */
.card {
/* Fires the animation once when the card enters the viewport */
animation-trigger: view();
animation-name: card-reveal;
animation-duration: 0.5s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.25, 0, 0, 1);
}
/* Stagger per column via nth-child */
.card:nth-child(3n+2) { animation-delay: 0.08s; }
.card:nth-child(3n+3) { animation-delay: 0.16s; }
@keyframes card-reveal {
from { opacity: 0; transform: translateY(24px) scale(0.96); }
to { opacity: 1; transform: none; }
}
/* Zero JavaScript. Old approach needed IntersectionObserver
to add a .visible class as each card entered the viewport. */