Javascript暂停和恢复文本上的过渡动画

注意:我知道有很多'javascript暂停/恢复'问题,我已经尝试用我的案例来实现,但仍然没有成功.

使用Jquery切换css animation-play-state

确保为动画属性添加前缀以实现跨浏览器兼容性(-moz,-webkit等)

片段

$(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();

    /*
     * it similiar like below,
     * but still not perfect.
     * when the duration of background-position-x has finished,
     * the transition start again. and 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 {
  from {
    background-position: auto
  }
  to {
    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;
}

Lorem ipsum dolor sit amet
Start
Pause