CSS

🕰️ Mastering animation-timeline in CSS

📌 What Is animation-timeline?

The animation-timeline property connects a CSS animation to acustom timeline — such as a scroll timeline created with@scroll-timeline. Instead of progressing over time, animations can progress based on scroll position,view timeline, or other future timeline types. 🚀✨

>>“animation-timeline lets animations sync with scrolling, visibility, or any custom timeline.”

🧩 Basic Syntax

Basic Syntax

animation-timeline: none | auto | <timeline-name>;

none — no timeline (normal time-based animation)
auto — browser decides the timeline
<timeline-name> — use a custom timeline you defined

🎯 animation-timeline with @scroll-timeline

Use @scroll-timeline to create a scroll-driven Timeline, TimelineItem, then use animation-timeline to bind your animation to it.

1️⃣ Define Scroll Timeline

@scroll-timeline

@scroll-timeline fadeTimeline {
  source: auto;
  orientation: block;
  scroll-offsets: 0%, 100%;
}

2️⃣ Define Keyframes

@keyframes

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

3️⃣ Attach Timeline to Animation

animation-timeline usage

.section {
  animation-name: fadeIn;
  animation-duration: 1s; /* no longer time-based */
  animation-timeline: fadeTimeline;
  animation-range: 0% 100%; /* Progress based on scroll */
}

✔ Now the animation progresses smoothly as the user scrolls.
✔ No JavaScript required.

🎬 animation-timeline with View Timelines

Instead of scrolling the whole page, you can animate based on when an elemententers or exits the viewport.

1️⃣ Create a View Timeline

View Timeline

.card {
  view-timeline-name: cardTimeline;
  view-timeline-axis: block;
}

2️⃣ Attach animation-timeline

Attach view timeline

.card {
  animation-name: fadeIn;
  animation-timeline: cardTimeline;
  animation-range: entry 0% exit 100%;
}

✔ Card fades in as it enters the viewport
✔ Finishes as it leaves

📦 Real Examples

1️⃣ Progress Bar Based on Scroll

Scroll progress bar

@scroll-timeline progressTimeline {
  source: auto;
}

.progress {
  animation: fillBar 1s linear;
  animation-timeline: progressTimeline;
  animation-range: 0% 100%;
}

@keyframes fillBar {
  from { width: 0%; }
  to   { width: 100%; }
}

2️⃣ Parallax Background

Parallax

@scroll-timeline parallaxScroll {
  scroll-offsets: 0%, 100%;
}

.bg {
  animation: parallaxShift 1s linear;
  animation-timeline: parallaxScroll;
}

@keyframes parallaxShift {
  from { transform: translateY(0); }
  to   { transform: translateY(-200px); }
}

3️⃣ Reveal Animation on Section Entry

Reveal on entry

.section {
  view-timeline-name: revealTimeline;
  view-timeline-axis: block;
  animation: reveal 1s ease-out;
  animation-timeline: revealTimeline;
  animation-range: entry 0% exit 100%;
}

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

🔍 Understanding animation-range (Works with animation-timeline)

animation-range

animation-range: entry 0% exit 100%;

✔ Controls where animation starts and ends within the scroll or view timeline

entry – element starts entering viewport
exit – element leaves viewport
Use percentages to define animation progress

🧠 Browser Support

✔ Chrome 115+
✔ Edge 115+
❌ Firefox (not supported yet)
❌ Safari (partially behind flags)

Note

Scroll-driven animations are cutting-edge — always test in supported browsers.

🛠️ Best Practices

Use scroll-driven animations for performance (avoid JS scroll listeners)
Animate transforms for smooth GPU-accelerated motion
Keep animations subtle — avoid overwhelming the user
Use view timelines for "enter reveal" effects
Test behavior with varying scroll lengths and device sizes

🔗 Helpful Resources

>>“animation-timeline lets your UI move with the user — scroll, view, and motion become one.” ✨