下划线标题css动画

Question

我在页面上有一些div 标签，一旦它们在视口中，我希望它们以某种方式动画。我已经得到了与waypoint.js 一起使用的“视口内”部分，所以现在我被动画困住了。

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

为了演示它，我已将效果更改为在 hover 上工作，如您所见，当它穿过灰线时，我得到了部分，但当它应该时我被卡住了离开现场（几乎离开现场 - 在灰线的 25% 处停止）：

HTML：

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

CSS：

.section-header {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 2em;
    letter-spacing: 5px;
    position: relative;
    text-align: center;

    > span {
        display: inline-block;
        position: relative;
        border-bottom: 1px solid #ccc;
        &:before {
            content: "";
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -1px;
            right: 0;

            background-color: #000;
            visibility: hidden;
            -webkit-transition: all 0.9s ease-in-out 0s;
            transition: all 0.9s ease-in-out 0s;
        }
        &:hover {
            &:before {
                visibility: visible;
                width: 100%;
            }
        }
    }

}

http://codepen.io/anon/pen/RWoxBv

这完全可以在 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)

Answer 1

因此，将元素从 left 100% 动画化到 left -75%（= 25% 可见！）
jsBin demo playground

这是一个很好的小例子，它使用了 small jQuery plugin taken from here 和一些标准 CSS：

/**
 * inViewport jQuery plugin by Roko C.B. stackoverflow.com/questions/24768795/
 *
 * Returns a callback function with an argument holding
 * the current amount of px an element is visible in viewport
 * (The min returned value is 0 (element outside of viewport)
 * The max returned value is the element height + borders)
 */
;(function($, win) {
  $.fn.inViewport = function(cb) {
    return this.each(function(i,el) {
      function visPx(){
        var elH = $(el).outerHeight(),
            H = $(win).height(),
            r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
        return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : (b<H?b:H)));  
      }
      visPx();
      $(win).on("resize scroll", visPx);
    });
  };
}(jQuery, window));



// Let's rock!
$("h1 span").inViewport(function(px){
  $(this).toggleClass("animateLine", !!px);
});

p{height:900px;}/*FOR DEMO ONLY*/

h1{
  text-align:center;
}
h1 span{
  display:inline-block;
  position:relative;
  overflow:hidden;
}
h1 span:after,
h1 span:before{
  content:"";
  height:1px;
  width:100%;
  position:absolute;
  bottom:0px;
  left:0;
  transition: 3s;
}
h1 span:before{
  background:#ccc;
}
/* We'll animate this one to -75% */
h1 span:after{ 
  background:#000;
  left:100%;
}
h1 span.animateLine:after{
  left: -75%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span>This is title 1</span></h1>
<p>1 Scroll down to find more titles</p>
<h1><span>This is title 2</span></h1>
<p>2 Scroll down to find more titles</p>
<h1><span>This is title 3</span></h1>
<p>3 Scroll down to find more titles</p>
<h1><span>This is title 4</span></h1>
<p>4 Scroll down to find more titles</p>
<h1><span>This is title 5</span></h1>
<p>5 Scroll down to find more titles</p>

基本上将伪:after 设置为初始左100%，并触发CSS3 类，该类将使用jQ 插件应用左-75% 过渡，就像在演示中一样。

https://stackoverflow.com/a/26831113/383904
CSS3-Animate elements if visible in viewport (Page Scroll)