How to make backgrund color animinate on scroll from left to right : This is my code 

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->


          <div class="titlediv" style='background:linear-gradient(90deg, #cc2900 79%, #b3b3b3 21%);'>
            <h2> Hii
            </div>
            
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            <p> My name is Josh and I need Help </p>
            
          <div class="titlediv" style='background:linear-gradient(90deg, #cc2900 79%, #b3b3b3 21%);'>
            <h2> Hii
            </div>

<!-- end snippet -->

As you can see, their are 2 h2 with background colors. 

I want to make the background color fill from left to right when it appears on screen. 

Just like this website: http://preview.themeforest.net/item/movie-me-cinemamovie-bootstrap-3-html-template/full_screen_preview/8713045

Scroll down and see IMDB rating etc..