jt
Go back
html
<div class="container">
  <img class="image" src="background.svg" alt="" />
</div>
css
.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.image {
  position: absolute;
  height: 200%;
  transform-origin: top center;
  animation: adjust-position linear forwards;
  animation-timeline: scroll(root block);
}

@keyframes adjust-position {
  100% {
    transform: translateY(-10%) scaleY(0.6);
  }
}