动画暂停过渡

我有一个动画移动background-position图像与关键帧,这很好.

虽然,当用户点击一个按钮时,我想暂停背景的动画但是有一个过渡,减慢然后停止background-position移动.

我搜索了类似的东西,但我没有找到任何东西,所以我想知道你们中是否有人会知道我怎么能这样做？

谢谢.

没有.使用CSS动画无法实现这一点,而出于几个原因只使用一个元素,它们如下所示:

动画的播放状态更改为paused立即操作.

在元素上应用动画后,它将控制属性,直到删除它为止.因此,background-position使用JS进行更改也不起作用(即使它实际上已暂停).

来自W3C规格:

CSS动画会影响计算属性值.在执行动画期间,属性的计算值由动画控制.这将覆盖正常样式系统中指定的值.

可以在下面的代码段中看到示例.与之一起animation-play-state: paused,切换的类也为background-position(重要)设置特定值,但它对元素完全没有影响.JS的注释部分是我试图以较慢的速度逐渐停止但是它不起作用.

var el = document.getElementsByTagName('div')[0];
var btn = document.getElementById('stop');
var i = 0,
  bgPosX,
  interval,
  state = 'running';

btn.addEventListener('click', function() {
/*  state = (state == 'running') ? 'paused' : 'running';
  console.log(state);
  if (state == 'paused') {
    var currPos = window.getComputedStyle(el).backgroundPositionX;
    bgPosX = parseInt(currPos.replace('px', ''), 10);
    interval = setInterval(function() {
      slowPause(bgPosX);
    }, 1);
  } else {
    el.style.backgroundPosition = null;
  } */
  el.classList.toggle('paused');
});

/*function slowPause(currPosX) {
  el.style.backgroundPosition = currPosX + (i * 0.2) + 'px 0%';
  console.log(el.style.backgroundPositionX);
  i++;
  if (i >= 1000) {
    clearInterval(interval);
    i = 0;
    console.log('cleared');
  }
}*/

.animated-bg-pos {
  height: 100px;
  width: 200px;
  background-image: linear-gradient(to right, red 25%, blue 25%, blue 50%, orange 50%, orange 75%, green 75%);
  background-size: 800px 100%;
  animation-name: animate-bg-pos;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 4s;
}
body div.animated-bg-pos.paused {
  animation-play-state: paused;
  background-position: 200px 0% !important;
}
@keyframes animate-bg-pos {
  from {
    background-position: 0px 0%;
  }
  to {
    background-position: 800px 0%;
  }
}

Stop Animation