如何在 CSS 中减慢悬停时的背景平移速度

Question

我有一个 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。解剖之后，我发现它使用了一种幻象，归结为我的目的就是这个。我想知道是否有办法将其应用于原始代码。

Answer 1

一种可能性是设置 2 个不同的动画，并暂停其中之一

@keyframes ScrollX {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: -28px;
  }
}
@keyframes ScrollY {
  0% {
    background-position-y: 0px;
  }
  100% {
    background-position-y: -28px;
  }
}

div {
  width: 30vw;
  height: 30vh;
  background: repeating-linear-gradient(
    45deg,
    #EE0000,
    #EE0000 10px,
    #990000 10px,
    #990000 20px
  );
  background-size: 150% 150%;
  background-position: 50% 50%;
  animation: ScrollX 1s linear infinite, ScrollY 1.5s linear infinite paused;
}
div:hover{
  animation: ScrollX 1s linear infinite, ScrollY 1.5s linear infinite;
}

<div></div>