0

I have icons in my sidebar that start spinning on hover using an animation. When the user's mouse leaves the element, the animation stops quite abruptly. I'm trying to somehow make this transition more smooth.

Here's a simplified version of what I'm doing:

div {
  font-size:18px;
  line-height:32px;
  width:32px;
  height:32px;
  background-color: yellow;
  border-radius: 16px;
  text-align: center;
}

div:hover {
  animation: spin 2s;
}

@keyframes spin {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
<p>Hover over the yellow circle below.</p>
<div>F</div>

Is there any way I can make the element either complete its iteration cycle, or otherwise ease out of its animation?

bigblind
  • 12,539
  • 14
  • 68
  • 123
  • And for the second part of the question (though it is mentioned in the comments of the primary), using `transition` + `animation` would've been one possible option but that doesn't work cross-browser. It works in FF but not Chrome (or Webkit). You can find some information about that here - http://stackoverflow.com/questions/32142484/combination-of-animation-and-transition-not-working-properly/32142949#32142949 – Harry Jan 28 '17 at 14:59
  • I was in mid of writing the answer. Unfortunately the question is closed. Wait a minute I put it in jsfiddle – user31782 Jan 28 '17 at 15:01
  • Here it is: https://jsfiddle.net/LfLmL5n3/ But instead of completing a circle the `F` goes back when mouseout. To make sure it completes the circle add a class with js on mouseenter. – user31782 Jan 28 '17 at 15:04
  • That's a good suggestion @user31782. If it is something that can be achieved via a transition, then yes that should be used over animations. But based on the statement in the question, I'm thinking that this is just a very simplified demo and the actual effect can't just be achieved with a transition (that is, the element has some specific in-between states that it must satisfy in addition to the start and end states etc.) – Harry Jan 28 '17 at 15:08
  • 1
    @Harry In that case js is the only way... and there should not be any problem with that because by the time user start interacting with site js would have loaded by then. Another idea without js: https://jsfiddle.net/Lf3bpao9/1/ – user31782 Jan 28 '17 at 15:48
  • @user31782: Exactly, that's what I had stated in the question which I had used to close this as a dupe of. Coming to your other idea, its also nice depending on what the user wants :) – Harry Jan 28 '17 at 15:49

0 Answers0