相关疑难解决方法(0)

我有动画:

img.rotate {
  animation-name: rotate;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

我有无限的旋转图像.现在我想用JS改变旋转速度.我试过了:

$('img').css('animation-duration', '2s');

持续时间会改变速度,但动画会重新启动到帧密钥0%(第一个),但我只想让动画继续,就像什么也没发生一样; 我不想回到0%.

我怎样才能做到这一点？

我有一个 div 背景平移，我想在悬停时减慢速度：

@keyframes backgroundScroll {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
div {
  width: 30vw;
  height: 30vh;
  background: repeating-linear-gradient(
    45deg,
    #EE0000,
    #EE0000 10px,
    #990000 10px,
    #990000 20px
  );
  background-size: 150%;
  background-position: 50% 50%;
  animation: backgroundScroll 3s linear infinite;
}
div:hover{
  animation: backgroundScroll 20s;
}

<div></div>

理论上，这样的东西是可行的，但它不会保留状态。我去挖掘并发现可以保留动画状态：StackOverflow-Change Animation speed on hoover。解剖之后，我发现它使用了一种幻象，归结为我的目的就是这个。我想知道是否有办法将其应用于原始代码。