Javascript 在css动画标题下加下划线

我在页面上有一些

div

标记，一旦它们进入视口，我希望它们以某种方式设置动画。我已经用

waypoint.js使用了“在视口中”部分，所以现在我只能用动画了

基本上，我希望在所有h1标记上始终有一个灰色下划线。一旦它们出现在视野中，我希望一条黑线从右到左延伸到灰线之上，然后几乎离开场景，停在灰线的25%左右

为了演示这一点，我将效果更改为在
悬停
上工作，正如您所看到的，我在零件穿过灰线时得到了它，但当它应该离开场景时，我被卡住了（几乎离开场景-在灰线的25%处停止）：

HTML:

<div class="section-header">
  <span>Hello</span>
</div>


这在CSS中完全可以做到吗？或者我应该使用Javascript吗

要进一步演示动画，请假设这是一条黑线：

           - (starts from right hand side and goes to left)
          --
         ---
        ----
       -----
      ------
     -------
    --------
   ---------
  ----------
 -----------
------------ (point when it covers the grey line and starts to 'leave the scene') 
-----------
----------
---------
--------
-------
------
-----
----
--- (stopping there)

因此，将元素从
左100%
设置为
左-75%
（=25%可见！）


下面是一个很好的小示例，它使用了和一些标准CSS：


/**
*由Roko C.B.stackoverflow.com提供的inViewport jQuery插件/questions/24768795/
*
*返回包含参数的回调函数
*元素在视口中可见的当前像素量
*（最小返回值为0（视口外的元素）
*最大返回值是元素高度+边框）
*/
;（功能（$，win）{
$.fn.inViewport=函数（cb）{
返回此值。每个函数（i，el）{
函数visPx（）{
var elH=$（el）.outerHeight（），
H=$（win）.height（），
r=el.getBoundingClientRect（），t=r.top，b=r.bottom；
返回cb.call（el，Math.max（0，t>0？Math.min（elH，H-t）：（b停止…停止后会发生什么？请在问题本身中发布相关代码。问题应该是独立的，我们不必离开现场查看您的问题“离开现场…几乎离开现场”？你能说得更具体些吗？更新了。我希望你能理解我想要实现的目标。：）我实际上做的每件事都是对的，除了
左边的
位。我在应用这个类和所有东西，我只是无法理解实际的动画。再次感谢！）@Bravi好吧，我不知道它在您的演示中是如何实现的，但是在这个示例中，即使您返回（滚动）到前面的标题，它也会使行具有动画效果。；（如果您不想，那么您可以简单地执行：
if（px）$（this）.addClass（“animateLine”）；
Happy coding
           - (starts from right hand side and goes to left)
          --
         ---
        ----
       -----
      ------
     -------
    --------
   ---------
  ----------
 -----------
------------ (point when it covers the grey line and starts to 'leave the scene') 
-----------
----------
---------
--------
-------
------
-----
----
--- (stopping there)