CSS curseur avec des flèches utilisant l'animation

Question

Je essaye de réaliser un slider en CSS seulement.
Quand on survole les flèches gauche et droite, le slider doit glisser. Bien sûr.

J'ai essayé quelque chose en utilisant animation-play-state, animation-fill-mode (pour conserver les positions) et animation-direction mais je n'arrive pas à le faire fonctionner complètement.

• En commençant par animation-play-state: paused, quand on survole les flèches, cela le change en running.
• En survolant la flèche droite, tout va bien. On peut survoler, quitter, survoler à nouveau.
• Mais, dès que je survole la flèche gauche (ce qui change la animation-direction en reverse), ça ne fonctionne plus.

Exemple simplifié:

.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);
  }
}

  [ ← ]
  [ → ]

Est-ce que quelqu'un peut m'aider à comprendre ce qu'il se passe, et corriger ce comportement indésirable?

Answer 1

Le principal problème ici est que changer la direction conservera l'état actuel de l'animation MAIS il tiendra compte de la nouvelle direction. Prenons un exemple facile :

Supposons que vous ayez une animation de left:0 à left:100%. Si vous exécutez d'abord l'animation jusqu'à left:80% puis changez la direction en revers, vous aurez left:20% !

Pourquoi ?

Parce qu'avec la direction par défaut, vous avez atteint les 80% (left:80%) de l'animation et 80% de la même animation avec la direction opposée est simplement left:20%.

Passez sur inverser et vous verrez que la position de la boîte saute pour passer à un nouvel état en tenant compte de la nouvelle direction. C'est évident lorsque l'animation se termine et vous passerez entre le premier et le dernier état :

.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%;
  }
}

  déplacer normalement
  inverse !!

Il n'y a pas de solution pour cela car c'est le comportement par défaut de l'animation, mais au lieu de cela, vous pouvez utiliser une transition pour obtenir un effet similaire. Le truc est de jouer avec la durée que vous augmentez / diminuez pour créer l'effet souhaité.

Voici une idée :

.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; /*Cela bloquera l'état actuel*/
}
.arrow-r:hover ~ .sliding {
  transform: translate(-1500px, 0);
  transition:all 2s;
}

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

  [ ← ]
  [ → ]