在標題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元素（如果在視口中可見）（頁面滾動）