CSS slider with arrows using animation

Question

I am trying to achieve a CSS only slider.
When hovering left and right arrows, the slider has to slide. Of course.

I tried something using animation-play-state, animation-fill-mode (to keep the positions) and animation-direction but I'm not able to fully make it work.

• Starting with animation-play-state: paused, hovering the arrows changes it to running.
• On hover of the right arrow, everything is fine. We can hover, leave, hover again.
• But, as soon as I hover the left arrow (that changes the animation-direction to reverse), it's broken.

Simplified snippet:

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

Can someone help me understand what is happening, and correct this unwanted behaviour?

Answer 1

The main issue here is that changing the direction will keep the current state of the animation BUT it will consider the new direction. Let's take an easy example:

Suppose you have an animation from left:0 to left:100%. If you first run the animation untill left:80% and then you change the direction to reverse you will have left:20%!

Why?

Because with the default direction you reached the 80% (left:80%) of the animation and 80% of the same animation with reverse direction is simply left:20%.

Hover on reverse and you will see that the position of the box is jumping to switch to the new state considering the new direction. It's obvious when the animation ends and you will be switching between the first and last state:

.sliding {
  width:100px;
  height:100px;
  background:red;
  left:0%;
  position:relative;
  animation:slide 5s linear forwards;
  animation-play-state:paused;
}
.arrows {
  margin:20px;
}

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

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

@keyframes slide {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

<div class="wrapper">
  <div class="arrows arrow-r">move normal</div>
  <div class="arrows arrow-l">reverse !!</div>
  <div class="sliding"></div>
</div>

There is no fix for this since it's the default behavior of animation, but instead you can rely on transition to obtain a similar effect. The trick is to play with the duration that you increase/decrease to create the needed effect.

Here is an idea:

.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%);
  transition:all 2000s linear; /*This will block the current state*/
}
.arrow-r:hover ~ .sliding {
  transform: translate(-1500px, 0);
  transition:all 2s;
}

.arrow-l:hover ~ .sliding {
  transform: translate(0px, 0);
  transition:all 2s;
}

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