Controle deslizante CSS com setas usando animação

Eu estou tentando alcançar um controle deslizante apenas CSS.
Quandohoversetas esquerda e direita, o controle deslizante devedeslizar. Claro.

Eu tentei algo usandoanimation-play-state, animation-fill-mode (para manter as posições) eanimation-direction mas não sou capaz de fazê-lo funcionar totalmente.

Começando comanimation-play-state: paused, hoveras setas mudam pararunning.Emhover da seta direita, está tudo bem. Podemos pairar, sair, pairar novamente.Mas assim que euhover a seta esquerda (que altera oanimation-direction parareverse), está quebrado.

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

Alguém pode me ajudar a entender o que está acontecendo e corrigir esse comportamento indesejado?