CSS animation-range-start Property

Code Examples

A basic example showing an element that begins fading in only after it is 50% through its entry into the viewport.

<style>
.scroll-box {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #000000;
}
.item {
  height: 100px;
  background-color: #008000;
  animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range-start: entry 50%;
  animation-range-end: contain 100%;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>
<div class="scroll-box">
  <div style="height: 500px;">Scroll down to see the green box fade in.</div>
  <div class="item"></div>
  <div style="height: 500px;"></div>
</div>

An advanced example using a scroll timeline where the start range is dynamically updated using JavaScript.

<style>
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: #ff0000;
  transform-origin: 0 50%;
  animation: scale-progress linear forwards;
  animation-timeline: scroll();
  animation-range-start: 10%;
}
@keyframes scale-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
</style>
<div id="progress-bar"></div>
<div style="height: 2000px; padding: 20px;">
  <h1>Advanced Scroll Progress</h1>
  <p>The red bar at the top will only start growing after you have scrolled 10% down the page.</p>
  <button onclick="adjustStart()">Change Start to 50%</button>
</div>
<script>
function adjustStart() {
  const bar = document.getElementById("progress-bar");
  bar.style.animationRangeStart = "50%";
  bar.style.backgroundColor = "#0000ff";
  console.log("Range start updated to 50%");
}
</script>

Pro Tip

You can combine a keyword and a percentage, such as "entry 25%". This acts like a fine-tuning knob, allowing you to say, "Start this animation when the element is a quarter of the way through its entry phase," giving you pixel-perfect control over reveals.