Javascript 使用vanilla JS在视口中切换的CSS动画

所以我用CSS制作了不同的动画，但问题是当页面加载时它们会立即启动（当然）。不过我不想要这个。在Vanilla JavaScript中是否有方法使动画仅在视口中启动？ 我已经搜索了很多地方，但我要么找到了需要使用的插件，要么找到了jQuery

HTML:

    <div class="introduction">
    <h1>I can do the following for you:</h1>
    <ul>
        <li>Create a custommade, new website.</li>
        <li>Code a PSD template into a working website.</li>
        <li>Rework an outdated website.</li>
        <li>Clean up messy code of a website.</li>
    </ul>
    </div>

---

这是您需要的代码

window.addEventListener("scroll", onScroll);

function onScroll() {
  for (var item of document.querySelectorAll(".introduction li")) {
    elementVisible(item);
  }
}

function elementVisible(el) {
  let top = el.offsetTop;
  let height = el.offsetHeight;
  let bottom = top + height;

  let IsOverBottom = top > (window.pageYOffset + window.innerHeight);
  let IsBeforeTop = bottom < window.pageYOffset;

  if (!IsOverBottom && !IsBeforeTop) {
    el.classList.add("show");
  }
}

这是一个基本的实现，但它让您更接近

---

我曾试图实现类似的效果：但我认为我的

滚动快照造成了一些问题。您认为此方法应该能够与设置了
overflow-y:auto
值的div一起工作吗？
window.addEventListener("scroll", onScroll);

function onScroll() {
  for (var item of document.querySelectorAll(".introduction li")) {
    elementVisible(item);
  }
}

function elementVisible(el) {
  let top = el.offsetTop;
  let height = el.offsetHeight;
  let bottom = top + height;

  let IsOverBottom = top > (window.pageYOffset + window.innerHeight);
  let IsBeforeTop = bottom < window.pageYOffset;

  if (!IsOverBottom && !IsBeforeTop) {
    el.classList.add("show");
  }
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

.show {
  animation: slideIn 5s ease-in-out;
}