我有一個(gè)div背景平移，我想在懸停時(shí)減速:

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

# # #一種可能性是設(shè)置兩個(gè)不同的動(dòng)畫(huà)，并暫停其中一個(gè)

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

# # #我設(shè)法通過(guò)將它包裝在另一個(gè)div(溢出:隱藏)中并對(duì)滾動(dòng)的div本身應(yīng)用懸停動(dòng)畫(huà)來(lái)實(shí)現(xiàn)視覺(jué)效果。

這個(gè)解決方案的問(wèn)題是:不僅僅是背景在滾動(dòng)。任何div的內(nèi)容也將在懸停時(shí)滾動(dòng)。所以根據(jù)你的用途，它可能并不完美。

@keyframes backgroundScroll {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes scrollX {
  0% {
    margin-left: 0;
  }

  100% {
    margin-left: -30vw;
  }
}

.wrapper {
  width: 30vw;
  height: 30vh;
  overflow: hidden;
}

.scrolling {
  width: 90vw;
  height: 30vh;
  background:
    repeating-linear-gradient(45deg,
      #EE0000,
      #EE0000 10px,
      #990000 10px,
      #990000 20px);
  background-size: 150%;
  background-position: 50% 50%;
  animation-name: backgroundScroll, scrollX;
  animation-duration: 9s, 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running, paused;
}

.scrolling:hover {
  animation-play-state: running;
}

<div class="wrapper">
  <div class="scrolling">
  </div>
</div>

# # #意思是這樣的:

@keyframes backgroundScroll {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes backgroundScrollHover {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

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

div:hover {
  animation: backgroundScrollHover 20s linear infinite;
}

<div></div>

# # #你要這樣嗎？

只是補(bǔ)充 動(dòng)畫(huà):無(wú)；

或者

animation-play-state: paused;
  animation-fill-mode: forwards;

@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: none;

}

<div></div>

###與@vals答案類(lèi)似的想法，但我將使用翻譯來(lái)實(shí)現(xiàn)它。我用了一個(gè)普通的倍增器，所以你可以很容易地控制速度。第一個(gè)動(dòng)作需要一個(gè)數(shù)字N，而第二個(gè)動(dòng)作需要使用一個(gè)符號(hào)相反的數(shù)字來(lái)降低速度。

下面我使用-3，加上2，得到-1，所以我從-3到-1

div {
  width: 30vw;
  height: 30vh;
  position:relative;
  z-index: 0;
  overflow: hidden;
}
div:before {
  content:"";
  inset: 0 -100% 0;
  position: absolute;
  background: repeating-linear-gradient(
    45deg, #EE0000 0 10px, #990000 0 20px
  );
  --m: (1.414 * 20px); /* this is the multiplier for the speed */
  animation: 
   main  1s linear infinite, 
   brake 1s linear infinite paused;
}
div:hover:before {
   animation-play-state: running;
}

@keyframes main {
  to {
    transform: translate(calc(-3* var(--m)));
  }
}
@keyframes brake {
  to {
    translate: calc(2* var(--m)) 0;
  }
}

<div></div>