jquery - Javascript pause and resume transition animation on text -

i try pause/resume transition animation on text. have try many solution similiar question, still not succeed.

i want pause 'color effect' when click pause button, , when click resume button 'color effect' finish job coloring whole text based on rest duration.

here's code.

$(document).ready(function(){    $('#start').on('click', function() {      $(this).text('resume');      $(this).attr('disabled',true);        $('span').addclass('active');      $('span').dequeue();    });    $("#stop").click(function() {      $('#start').attr('disabled',false);        $('#start').clearqueue();        $("span").stop();          /*      * similiar below,      * still not perfect.      * when duration of background-position-x has finished,      * transition start again. , yet still not perfect        */        /*$('span').animate({        'background-position-x': '10%',        'background-position-y': '20%'      }, 10000, 'linear');*/    });  })

body {  		background: #ccc;  	}  	span {  	    height: 25px;  	    background-size: 200% 100%;  	    background-image: linear-gradient(to right, orange 50%, white 50%), linear-gradient(to right, transparent 50%, transparent 50%);  	    text-indent: 28px;  	    font-size: 30px;  	    background-size: 200% 100%;  	    background-repeat: no-repeat;  	    background-position: 100% top, 100% top;  	    -webkit-background-clip: text, border-box;  	    background-clip: text, border-box;  	    color: transparent;  	}  	.active {  		background-position: 0% top, 0% top;  	    transition: background-position 10s;   	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <p><span>lorem ipsum dolor sit amet</span></p>  <button id="start">start</button>  <button id="stop">pause</button>

note : know there many 'javascript pause/resume' question, try implement case, still not succeed.

using jquery toggle css animation-play-state

ensure add prefixes animation properties cross browser compatibility (-moz,-webkit, etc)

snippet

$(document).ready(function() {    $('#start').on('click', function() {      $(this).text('resume');      $(this).attr('disabled', true);        $('span').addclass('active');      $('span').dequeue();    });    $("#stop").click(function() {      $('#start').attr('disabled', false);        $('#start').clearqueue();      $('span').removeclass('active');      $('span').addclass('stop');      $("span").stop();        /*       * similiar below,       * still not perfect.       * when duration of background-position-x has finished,       * transition start again. , yet still not perfect       */      /*$('span').animate({        'background-position-x': '10%',        'background-position-y': '20%'      }, 10000, 'linear');*/    });  })  $("span").on('animationend webkitanimationend oanimationend', function() {    $("#start").attr('disabled', false);  })

@keyframes anime {    {      background-position: auto    }    {      background-position: 0% top, 0% top;    }  }    body {    background: #ccc;  }    span {    height: 25px;    background-size: 200% 100%;    background-image: linear-gradient(to right, orange 50%, white 50%), linear-gradient(to right, transparent 50%, transparent 50%);    text-indent: 28px;    font-size: 30px;    background-size: 200% 100%;    background-repeat: no-repeat;    background-position: 100% top, 100% top;    -webkit-background-clip: text, border-box;    background-clip: text, border-box;    color: transparent;  }    .active {    animation: anime 10s;    animation-play-state: running !important;  }    .stop {      animation: anime 10s;    animation-play-state: paused;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <p><span>lorem ipsum dolor sit amet</span></p>  <button id="start">start</button>  <button id="stop">pause</button>