用html制作屏幕滚动动画

<div class="scroll-animation"></div>

.scroll-animation {
  width: 100%;
  height: 100vh;
  background-color: #f1f1f1;
  animation: scroll 2s infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(-100%);
  }
}

window.addEventListener('scroll', function() {
  var element = document.querySelector('.scroll-animation');
  var position = element.getBoundingClientRect().top;
  var windowHeight = window.innerHeight;

  if (position < windowHeight) {
    element.classList.add('active');
  } else {
    element.classList.remove('active');
  }
});