Function is only running once

My function is only running once. It contains only css.

I'm trying to make the divider expand in the animation, when the class for added. I'm trying, but I can not. I need this jquery code to execute when a specific slide becomes active. Anyone have any idea how to do it?. I'm trying to put this on the Materialize Slide. I have the following JQuery code. He are simple.

HTML

 <section class="section-slide">
        <div class="slider">
            <ul class="slides">
                <li class="lista-slider">
                    <img src="img/music10.jpeg" class="responsive-img"> 
                    <div class="caption center-align top-setting">
                        <h3>Text1</h3>
                        <div class="divider-cap divider"></div>
                        <h5 class="light grey-text text-lighten-3">Test1</h5>   
                    </div>
                </li>

                <li class="slide-2 lista-slider">
                    <img src="img/music12.jpeg" class="responsive-img"> 
                    <div class="caption center-align center-setting">
                      <h3>Test 2</h3>
                    </div>
                </li>

                <li class="lista-slider">
                    <img src="img/music4.jpg" class="responsive-img"> 
                    <div class="caption right-align right-setting">
                      <h3>Text 3 </h3>
                      <h5 class="light grey-text text-lighten-3">Test 3</h5>
                    </div>
                </li>
                <li class="lista-slider">
                    <img src="img/music9.jpeg" class="responsive-img"> 
                    <div class="caption center-align">
                      <h3>This is our big Tagline!</h3>
                      <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
                    </div>
                </li>
            </ul>
        </div>
    </section>

JQUERY

$(window).on('load', function(){    
        var slideDivider = $('.slider .divider-cap')
        var sliderList = $('.slider ul li:eq(0)')   

        if(sliderList.hasClass('active'))
        {
            slideDivider.addClass('divider')    
        }
        else{
            slideDivider.removeClass('divider')
        }
    });

CSS

  .section-slide .slider .top-setting .divider{
      width: 600px;
      margin: auto;
      animation: dividerAnim 1s 1;
  }

 @-webkit-keyframes dividerAnim{
    0%   {width: 0px;}
    100% {top: 600px;}
}

 @keyframes dividerAnim{
    0%   {width: 0px}
    100% {width: 600px;}
}