аюсь сделать слайдер только для CSS.
когдаhoverС помощью стрелок влево и вправо ползунок долженгорка, Конечно.

Я пробовал что-то используяanimation-play-state, animation-fill-mode (сохранить позиции) иanimation-direction но я не могу полностью заставить это работать.

Начиная сanimation-play-state: paused, hoverстрелками меняется наrunning.Наhover стрелка вправо, все в порядке. Мы можем парить, уходить, парить снова.Но, как только яhover стрелка влево (которая меняетanimation-direction вreverse), это сломано.

Упрощенный фрагмент:

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

Может ли кто-нибудь помочь мне понять, что происходит, и исправить это нежелательное поведение?