当页面在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>

你能告诉我怎样才能达到我所需要的吗。我愿意接受所有建议，甚至可以将SVG更改为背景图像或更改HTML结构。先谢谢你

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))
);
}

.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;
 }