Underline the header css animation

Question

I have some div tags on the page and once they are in a viewport, I want them to animate in a certain way. I already got the 'in viewport' part working with waypoint.js so now I am stuck with the animation.

Basically, I want to have a grey underline on all h1 tags at all times. Once they are in view, I want a black line to run on top of that grey line from right to left and almost leave the scene afterwards, stopping at about 25% of grey line.

To demonstrate it, I've changed the effect to work on hover and as you can see, I've got the part when it runs through the grey line, but I'm stuck with the part when it should leave the scene (almost leave the scene - stopping at 25% of grey line):

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

Is this possible to do in CSS at all? Or should I use Javascript for it?

To demonstrate the animation further, imagine that this is the black line:

           - (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

So animate an element from left 100% to left -75% (= 25% visible!)
jsBin demo playground

Here's a small nice example that uses a small jQuery plugin taken from here and a bit of standard 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> 

Basically set the pseudo :after to initial 100% left, and trigger the CSS3 class that will apply the left -75% transition using the jQ plugin like in the demo.

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