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

Question

所以我在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>

CSS：

@keyframes showOnLoad {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.introduction li {
    list-style-type: none;
    margin-bottom: 5px;
    text-align: center;
    opacity: 0;
    -webkit-animation: showOnLoad;
    animation: showOnLoad;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.introduction li:nth-child(2) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.introduction li:nth-child(3) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.introduction li:nth-child(4) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}