resume anim

resume anim

by Amal Das

HTML

<p><span>Lorem ipsum dolor sit amet</span></p>
<button id="start">Start</button>
<button id="stop">Pause</button>

CSS

@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;
}

JavaScript

$(document).ready(function() {
  $('#start').on('click', function() {

    $('span').addClass('active');
  });
  $("#stop").click(function() {
    $('span').removeClass('active');
    $('span').addClass('stop');
  });
})