How to slow background pan on hover in CSS

Question

I have a div background pan that I want to slow on hover:

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

In theory, something like this would work, but it doesen't retain the state. I went digging and found it is possible to retain the animation state: StackOverflow-Change Animation speed on hover. After disection, I found it uses an illusion, which reduced to my purposes is this. I am wondering if there is a way to apply this to the original code.

Answer 1

One posibility is to set 2 different animations, and pause one of them

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