Continuous rotation on hover exit

Question

Consider the following fiddle: http://jsfiddle.net/a7EVf/5/

Is it possible to have the div rotate through (effectively to 360 degrees instead of 0) on hover out instead of moving back counterclockwise?

I would rather NOT use JavaScript (including jQuery) if possible - I realize it would be simple enough to set

transform: rotate(360deg); /*also the vendor-specific versions*/

on the original using JS (and once it reaches 360 reset it to 0 without a transition), but is it possible to do this only using CSS3?

Ah, thanks. I fixed that but didn't save the fiddle afterwards. — Patrick White, Oct 08 '13 at 15:38
@Pete: No, this just rotates it 360 degrees on hover and then back 360 degrees counterclockwise on hover out. I'm looking to rotate it 180 degrees clockwise on hover and then another 180 degrees clockwise on hover out. — Patrick White, Oct 08 '13 at 15:42
You can try [this](http://jsfiddle.net/hari_shanx/a7EVf/8/) with CSS3 animation. I am not sure if this is what you are after and hence not adding as answer. One issue that I saw is that it rotates once on load also :( — Harry, Oct 08 '13 at 15:50
@Harry: this is great! Some snapping on moving the mouse but that seems pretty unavoidable. If you added this as an answer I would accept it. — Patrick White, Oct 08 '13 at 15:54

score 1 · Accepted Answer · edited May 23 '17 at 11:58

Using CSS3 animation, we can make the block rotate from 0 to 180 degree on hover and then rotate from 180 to 360 degree when not hovered.

#block {
  position: absolute;
  width: 100px;
  height: 50px;
  left: 100px;
  top: 100px;
  background: black;
  color: white;
  animation-name: out;  /* animation to rotate on hover out*/
  animation-duration: 1s;  /* duration for the animation, increase it to slow it down*/
}
#block:hover {
  animation-name: in;  /* animation to rotate on hover */
  animation-duration: 1s;
}
@keyframes in {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
@keyframes out {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div id="block"></div>

Note:

This causes the block to rotate on page load also. There is no solution for this other than using JS and nullify the effect on page load.
As you mentioned, there is a bit of snapping when we hover in and out at very quick intervals. This can be explained by having a look at the answers here and here. Once the animation is no longer applicable (that is, the selector is no longer applicable), the animation will abruptly stop and return back to its original un-transformed position.

Continuous rotation on hover exit

1 Answers1

Linked