1

So set I have a square that spins right, when you hover over it. When you "let go" it spins back the other direction, to the left.

Issue is, when I remove the mouse before the hover animation is finished, it first goes back to it's starting position, and then rotates left.

I want it so when you mouseoff, it goes from it's current position, back to the start position.

How do I accomplish this?

https://jsfiddle.net/BradMitchell/84rprcmc/1/

@keyframes rotate_right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate_left {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.square {
  margin: 100px auto;
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: 2s ease rotate_left;
}

.square:hover {
  animation: 2s ease rotate_right;
}
<div class="square"></div>

How do I do this? Does it require two keyframes like I'm doing?

hungerstar
  • 21,206
  • 6
  • 50
  • 59
James Mitchell
  • 2,387
  • 4
  • 29
  • 59
  • Please review and comment on my answer, and let me know if something is unclear or missing. If not, then it would be great if you could accept it. – Asons Jul 01 '17 at 21:44
  • Since I didn't got any response I deleted my answer and closed this question as a duplicate. – Asons Oct 05 '17 at 15:24

0 Answers0