<div class="page">
  <div class="arrow">Scroll ⬇️ Down</div>
  <div class="img"></div>
</div>
.page {
  height: 400dvh;
  display: grid;
  place-items: center;
}

.img {
  background-image: url("https://images.unsplash.com/photo-1701735168006-1c7cbb9caff9?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDM2MDg1MjR8&ixlib=rb-4.0.3&q=85");
  width: 300px;
  height: 200px;
  background-size: 300px;
  background-repeat: no-repeat;
  background-position: center;

  animation-range: cover 0% cover 100%;
  animation: the-animation linear;
  animation-timeline: view();
  animation-iteration-count: 1;
}

@keyframes the-animation {
  to {
    background-size: 500px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js