当页面在javascript中上下滚动时，如何将相同间隔的动画添加到位于一个位置的不同元素

如何解决当页面在javascript中上下滚动时，如何将相同间隔的动画添加到位于一个位置的不同元素

感谢您查看我的问题。所以这就是我要实现的：

我在页面上有一个将包含图像的元素。但没有一个图像。元素的内容4个内嵌svg图片。

当页面向下滚动并进入该元素时，它应从图像1变为图像4更改4次，而第四次滚动将保持可见，直到该元素在我们向下滚动时位于滚动视图之外。然后，当您向上滚动时，将发生相反的情况。第四幅图像首先出现，然后是第三幅，然后是第二幅和第一幅，直到您向上滚动并且该元素再次移出视图为止，该图像一直可见。它们的关键是sVG应该基于滚动来制作动画。

所以到目前为止，我要做的是在每个svg可见时向其添加一个类，并为每个svg添加淡入淡出的动画。但是问题是我需要它们在页面滚动时出现而不是在添加类时出现。我需要他们根据页面滚动按间隔播放动画。这是HTML：

<div class="svg-container">
<svg class="outer-svg-wrapper" xmlns="http://www.w3.org/2000/svg" width="95" height="95" viewbox="0 0 95 95">
    <path fill="#3B3B3C" fill-rule="evenodd" d="M95 47.5C95 73.734 73.734 95 47.5 95 21.267 95 0 73.734 0 47.5S21.267 0 47.5 0C73.734 0 95 21.266 95 47.5"/>
</svg>
<svg class="outer-svg-wrapper" xmlns="http://www.w3.org/2000/svg" width="96" height="119" viewbox="0 0 96 119">
    <g fill="#3B3B3C" fill-rule="evenodd">
        <path d="M6.684 94.776C14.986 108.682 30.177 118 47.55 118s32.564-9.318 40.866-23.224H6.684zM0 47.472h95.099C94.732 21.518 73.591.59 47.55.59S.367 21.52 0 47.472" transform="translate(0 .41)"/>
    </g>
</svg>
<svg class="outer-svg-wrapper" xmlns="http://www.w3.org/2000/svg" width="96" height="126" viewbox="0 0 96 126">
    <g fill="#3B3B3C" fill-rule="evenodd">
        <path d="M36 10.68L58.384 10.68 58.384 0 36 0z"/>
        <path d="M0 53.883h95.099C94.732 27.929 73.591 7 47.55 7S.367 27.929 0 53.883M7 102c8.302 13.906 23.493 23.224 40.866 23.224S80.43 115.906 88.732 102H7z"/>
    </g>
</svg>
<svg class="outer-svg-wrapper" xmlns="http://www.w3.org/2000/svg" width="100" height="149" viewbox="0 0 100 149">
    <g fill="#3B3B3C" fill-rule="evenodd">
        <path d="M37.87 20.563L61.175 20.563 61.175 0 37.87 0z"/>
        <path d="M.302 61.265h98.44c-2.708-24.793-23.707-44.089-49.22-44.089-25.512 0-46.512 19.296-49.22 44.09M0 148.543s22.172-.045 49.522-.045c27.35 0 49.522.045 49.522.045l-.373-21.268H.138L0 148.543z"/>
    </g>
</svg>

这是我从here借来的js代码：

var scroll = window.requestAnimationFrame ||
// IE Fallback
function (callback) {
    window.setTimeout(callback,1000 / 60)
};
var elementsToShow = document.querySelectorAll('.outer-svg-wrapper');

function loop() {

Array.prototype.forEach.call(elementsToShow,function (element) {
    if (isElementInViewport(element)) {
        element.classList.add('is-visible');
    } else {
        element.classList.remove('is-visible');
    }
});

  scroll(loop);
}

// Call the loop for the first time
loop();

// Helper function from: http://stackoverflow.com/a/7557433/274826
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
    (rect.top <= 0 &&
        rect.bottom >= 0) ||
    (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.top <= (window.innerHeight || document.documentElement.clientHeight)) ||
    (rect.top >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
);
}

我的CSS使用SASS：

.svg-container {
  width: 100%;
  position: relative;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.outer-svg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translate(50%,50%);
&:nth-child(1) {
    animation-delay: 1s;
}
&:nth-child(2) {
    animation-delay: 2s;
}
&:nth-child(3) {
    animation-delay: 3s;
}

&:nth-child(4) {
    animation-delay: 4s;
    &.is-visible {
        animation: opacity;
    }
  }
}
.is-visible {
  animation: fadein-svg 1s ease-in-out forwards;
 }

您能建议我如何实现我所需要的吗？我愿意接受所有建议，甚至将SVG更改为背景图像或更改HTML结构。预先谢谢你。