css - Intersection Observer - 如何循环或重新启动动画？

Question

我使用 InterSectionObserver 在网站上启动动画。我在 DIV 中有几个 svg，在它们到达 Viewpport 后，我​​在其中添加了“动画”类。到目前为止一切都很好。

这是我的 JS：

if (IntersectionObserver) {
//When the element is visible on the viewport,
//add the animated class so it creates the animation.
let callback = function(entries) {
    entries.forEach(entry => {
        //if the element is visible, add the animated class
        if (entry.isIntersecting) {
            entry.target.classList.add('animated');
            observer.unobserve(entry.target);
        }
    })
}
//Create the observer
let observer = new IntersectionObserver(callback, {
    root: null,
    rootMargin: "-100px",
    threshold: 0
});

//Get and observe all the items with the item class
let items = document.querySelectorAll('.animate');
items.forEach((item) => {
    observer.observe(item);
});

我需要在播放后重新启动动画，最好在循环之间有一点延迟。我怎样才能做到这一点？

这里工作的 CodePen：https ://codepen.io/w3work/pen/RwKYgyV

标签： cssanimationcss-animationsintersection-observer