在标题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演示场

这是一个小示例，它使用一个从此处获取的jQuery小插件和一些标准CSS：

 /** * inViewport jQuery plugin by Roko CB 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, Ht) : (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％左，然后像演示中一样使用jQ插件触发CSS3类，以应用左-75％过渡。

https://stackoverflow.com/a/26831113/383904
CSS3-Animate元素（如果在视口中可见）（页面滚动）