Javascript 卷轴上的动画线条

我有一个简单的动画线延伸和它的自动播放，但它在网站的第二部分。当用户在其上时，如何使其显示

代码如下：

家{ 高度：1000px； 背景：RGBA0153255,1； } 工作{ 位置：相对位置； 高度：1000px； 背景：RGBA0204102,1； } 关于{ 高度：1000px； 背景：rgba153,51,51,1； } 接触{ 高度：1000px； 背景：rgba153153,1； } 线{ 位置：绝对位置； 宽度：340px； 利润上限：200px； 高度：4px； 背景：rgba0,0,0,1； -moz动画持续时间：1s； -webkit动画持续时间：1s； -moz动画名称：slidein； -webkit动画名称：slidein； } @-moz关键帧幻灯片{ 从{ 左边距：100%； 宽度：300% } 到{ 左边缘：0%； 宽度：600%； } } @-webkit关键帧幻灯片{ 从{ 左边缘：0%； 宽度：0% } 到{ 左边缘：0%； 宽度：340px； } }

---

使用javascript鼠标悬停或类似的方法获取当前位置，如果该位置与您的ciriteria相匹配，请在动画中添加一个类

document.querySelector('#line').addEventListener("mouseover", function() {
this.classList.add("animation_class");
});

这也适用于css hover，但实现可能会变得棘手

#line {
    margin-left:100%;
    width:300%;
    transition: width 1s, margin-left 1s;
}

#line:hover {
    margin-left:0%;
    width:600%;
}

无论何时进入或离开line元素，转换都将触发

如果悬停发生在前一个元素上，也可能触发其他同级选择器：

CSS唯一解决方案 有一些内容：

它在悬停工作div时工作，因此每当您将鼠标移动到此div时，动画都会启动

如果你仍然没有足够的滚动，你也不会看到它

工作：悬停>行{ -moz动画名称：slidein； -webkit动画名称：slidein； 动画名称：slidein； } 家{ 高度：1000px； 背景：rgba0153255,1； } 工作{ 位置：相对位置； 高度：1000px； 背景：rgba0、204、102、1； } 工作：悬停>直线{ -moz动画名称：slidein； -webkit动画名称：slidein； 动画名称：slidein； } 关于{ 高度：1000px； 背景：rgba153,51,51,1； } 接触{ 高度：1000px； 背景：rgba153、153、153、1； } 线{ 位置：绝对位置； 宽度：340px； 利润上限：200px； 高度：4px； 背景：rgba0,0,0,1； -moz动画持续时间：1s； -webkit动画持续时间：1s； 动画持续时间：1s； } @-moz关键帧幻灯片{ 从{ 左边距：100%； 宽度：300% } 到{ 左边缘：0%； 宽度：600%； } } @-webkit关键帧幻灯片{ 从{ 左边缘：0%； 宽度：0% } 到{ 左边缘：0%； 宽度：340px； } }

---

好的，这个解决方案使用JS，因为您必须跟踪窗口位置才能开始动画，它非常简单，您可以在这里看到：

$function{ window.addEventListenerscroll，functionevent{ var top=this.scrollY， 行=$‘行’； 如果顶部>640{ addClass'animate-line'； }否则 移除类'animate-line'； }; }; 家{ 高度：1000px； 背景：rgba0153255,1； } 工作{ 位置：相对位置； 高度：1000px； 背景：rgba0、204、102、1； } 关于{ 高度：1000px； 背景：rgba153,51,51,1； } 接触{ 高度：1000px； 背景：rgba153、153、153、1； } 线{ 位置：绝对位置； 宽度：340px； 利润上限：200px； 高度：4px； 背景：rgba0,0,0,1； -moz动画持续时间：1s； -webkit动画持续时间：1s； } .制作线条动画{ -moz动画名称：slidein； -webkit动画名称：slidein； } @-moz关键帧幻灯片{ 从{ 左边距：100%； 宽度：300% } 到{ 左边缘：0%； 宽度：600%； } } @-webkit关键帧幻灯片{ 从{ 左边缘：0%； 宽度：0% } 到{ 左边缘：0%； 宽度：340px； } }

---

不，我不想悬停动画自动播放我只想在我滚动到他的位置时播放我想你需要waypoint.js