Estoy tratando de lograr un control deslizante solo CSS.
Cuandohovering flechas izquierda y derecha, el control deslizante tiene quediapositiv. Por supuesto

Intenté algo usandoanimation-play-state, animation-fill-mode (para mantener las posiciones) yanimation-direction pero no puedo hacer que funcione por completo.

Empezando conanimation-play-state: paused, hovering las flechas lo cambia arunning.Enhover de la flecha derecha, todo está bien. Podemos flotar, irnos, flotar nuevamente.Pero, tan pronto como yohover la flecha izquierda (que cambia laanimation-direction areverse), esta roto

Fragmento simplificado:

.wrapper {
  overflow: hidden;
  position: relative;
  width: 500px;
}

.arrows {
  z-index: 2;
  position: absolute;
  top: 0;
  height: 100%;
  background: #ddd;
  opacity: 0.66;
}

.arrows:hover {
  opacity: 1;
}

.arrow-l {
  left: 0;
}

.arrow-r {
  right: 0;
}

.sliding {
  height: 160px;
  width: 2000px;
  background: linear-gradient(to bottom right, transparent 49.9%, gray 50.1%);
  animation: slide 2s linear;
  animation-play-state: paused;
  animation-fill-mode: both;
}

.arrows:hover~.sliding {
  animation-play-state: running;
}

.arrow-l:hover~.sliding {
  animation-direction: reverse;
}

@keyframes slide {
  0% {
    transform: translate(0px, 0);
  }
  100% {
    transform: translate(-1500px, 0);
  }
}

<div class="wrapper">
  <div class="arrows arrow-l">[ ← ]</div>
  <div class="arrows arrow-r">[ → ]</div>
  <div class="sliding"></div>
</div>

Puede alguien ayudarme a entender lo que está sucediendo y corregir este comportamiento no desead