如何实现CSS滚动线动画仅在元素进入视口时触发并重复执行？

完全可行，用Intersection Observer API就能实现，这是专门检测元素是否进入视口的现代API，适配桌面和移动端。下面是修正后的完整解决方案：

1. 修正CSS错误并调整动画逻辑 #

原CSS存在语法错误，且默认自动播放动画，我们改成通过类来触发动画：

.tm-scroll {
    position: relative;
    width: 3px;
    height: 300px;
    background-color: transparent; /* 修正#none的无效写法 */
    overflow: hidden;
    margin: auto;
}

.tm-scroll span {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #F6DFA4;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    /* 移除默认动画，改为通过类触发 */
}

/* 动画触发类，仅当元素进入视口时添加 */
.tm-scroll span.animate {
    animation: scrollHelperFerro 3s infinite ease-in-out;
}

@keyframes scrollHelperFerro {
  0% {
        transform: translateY(-100%);
  }
  100% {
        transform: translateY(100%);
  }
}

修正点说明：

• 将background-color: #none改为transparent（#none是无效CSS值）
• 移除span默认的animation属性，新增.animate类绑定动画
• 删除keyframes里多余的逗号和末尾无效的大括号

2. JavaScript实现视口检测与动画触发 #

用Intersection Observer监听元素，每次进入视口时重新触发动画，离开时重置状态：

// 获取目标动画元素
const scrollElement = document.querySelector('.tm-scroll span');

// 配置Observer参数
const observerOptions = {
    root: null, // 以浏览器视口作为检测根容器
    rootMargin: '0px', // 无额外触发边距
    threshold: 0.1 // 元素10%进入视口时触发动画
};

// 处理元素相交状态的回调函数
const observerCallback = (entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // 进入视口：重置动画并重新播放
            scrollElement.classList.remove('animate');
            // 强制浏览器重绘，确保动画从头开始
            void scrollElement.offsetWidth;
            scrollElement.classList.add('animate');
        } else {
            // 离开视口：停止动画并重置元素位置
            scrollElement.classList.remove('animate');
            scrollElement.style.transform = 'translateY(-100%)';
        }
    });
};

// 创建Observer实例并开始监听
const observer = new IntersectionObserver(observerCallback, observerOptions);
observer.observe(scrollElement);

逻辑说明：

• 元素进入视口时，先移除动画类再强制重绘，避免动画无法从头触发的问题
• 离开视口时，移除动画类并重置元素初始位置，保证下次进入时动画从起点开始
• threshold值可按需调整，比如设为0表示元素刚进入视口就触发

3. 兼容性说明 #

Intersection Observer支持所有现代浏览器，包括移动端的Chrome、Safari、Firefox等，无需额外兼容代码即可覆盖绝大多数用户。

内容的提问来源于stack exchange，提问作者Willjamin