Reverse animation on hover

Question

I ran into a problem, I made a simple animation using the Shape Shifter site and I want this animation to start on my site when I hover over the picture, but so that when I remove the cursor from the picture, the animation starts in the reverse order and that it is smooth.

At the moment, I managed to make this animation run when the cursor is hovered, but when I remove it from the picture, the animation immediately returns to the first frame

Here is the code that I wrote

.box {
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

@keyframes playStart {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: -15360px 0px;
  }
}

@keyframes playEnd {
  0% {
    background-position: -15360px 0px;
  }
  100% {
    background-position: 0px 0px;
  }
}

.anim_image {
  animation-duration: 1000ms;
  animation-timing-function: steps(60);
  width: 256px;
  height: 256px;
  background-repeat: no-repeat;
  background-image: url(http://cu14284.tmweb.ru/Image/sprite_60fps.svg);
  animation-fill-mode: forwards;
}

.anim_image:hover {
  animation-name: playStart;
}

.anim_image {
  animation-name: playEnd;
}

Reverse animation on hover

0 Answers