我怎样才能让动画在向下滚动时开始？

@keyframes scrollAnimation {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

.element {
  animation-name: scrollAnimation;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

window.addEventListener('scroll', function() {
  var element = document.querySelector('.element');
  var elementOffsetTop = element.offsetTop;
  var scrollPosition = window.pageYOffset + window.innerHeight;

  if (scrollPosition > elementOffsetTop) {
    element.classList.add('animate');
  }
});

<div class="element">Content</div>