CSS animation-range Property

Code Examples

A basic example showing an element that fades and scales in only during the 'entry' phase of its visibility in the scroll container.

<style>
.scroll-box {
  height: 300px;
  overflow-y: scroll;
}
.item {
  height: 100px;
  background: #333333;
  margin: 400px 0;
  animation: fade-in linear forwards;
  view-timeline-name: --item-visible;
  animation-timeline: --item-visible;
  animation-range: entry 0% entry 100%;
}
@keyframes fade-in {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
</style>
<div class="scroll-box">
  <div class="item"></div>
</div>

An advanced example using a global scroll timeline to fill a progress bar, with a specific percentage range and JavaScript support detection.

<style>
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: #ff0000;
  transform-origin: 0% 50%;
  animation: fill-up linear forwards;
  animation-timeline: scroll();
  /* Animation starts at 10% scroll and ends at 90% scroll */
  animation-range: 10% 90%;
}
@keyframes fill-up {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
</style>
<div id="progress-bar"></div>
<div style="height: 2000px;">Scroll down to see the bar fill up between 10% and 90% of the page height.</div>
<script>
// Example of dynamically checking support and updating range
const bar = document.getElementById("progress-bar");
if (CSS.supports("animation-range", "10% 90%")) {
  console.log("Scroll animations supported");
} else {
  bar.style.display = "none";
}
</script>

Pro Tip

You can combine named ranges with percentages for surgical precision. For example, "entry 20% exit 80%" tells the browser to start the animation 20% into the entry phase and finish it 80% through the exit phase. This creates a smooth buffer so the animation doesn't feel abrupt the moment the element touches the viewport edge.