Scroll‑Based CSS Animations with animation‑timeline and view() – A No‑JS Approach

Front‑end developers often rely on JavaScript to trigger animations on scroll, which can hurt performance. This tutorial demonstrates a pure‑CSS solution using the animation-timeline property together with the view() function to drive animations based on the viewport’s scroll position.

First, a simple rotating sphere is created with the class autoRotate . The CSS defines the animation and its timeline:

.autoRotate{
animation: autoRotateAnimation;
animation-timeline: view();
}
@keyframes autoRotateAnimation{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}

Adding animation-timeline: view(); links the animation progress to the scroll position, eliminating the need for JavaScript listeners.

To make text appear as the page scrolls, a second animation is defined. The element with class autoShow uses:

.autoShow{
animation: autoShowAnimation;
animation-timeline: view();
}
@keyframes autoShowAnimation{
from{opacity:0; transform:translateY(200px) scale(0.3);}
to{opacity:1; transform:translateY(0) scale(1);}
}

The view() function can accept parameters to fine‑tune when an animation starts or ends. For example, animation-timeline: view(block auto 20%); starts the animation when the element’s top reaches 20 % from the bottom of the viewport, while animation-timeline: view(block 50% auto); ends it when the element’s bottom reaches 50 % from the top of the viewport.

Combining start and end controls enables complex scroll effects without extra JavaScript:

.autoShow{
animation: autoShowAnimation both;
animation-timeline: view(50% 5%);
}

The keyword both is an animation-fill-mode value that keeps the animated styles applied before and after the animation, preventing abrupt jumps when scrolling up or down.

In summary, using animation-timeline with view() allows developers to create performant, JavaScript‑free scroll‑driven animations, control their start and end points precisely, and ensure smooth visual continuity with the both fill mode.