Rota on hove, stop on mouse out. (slow finish))

by Todd Newent

HTML

<div id="square"></div>

CSS

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

#square {
  display: block;
  background-color: #369;
  height: 100px;
  margin: 50px;
  width: 100px;
  -webkit-animation-duration: 2.5s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: infinite;
}

#square:hover{
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 1.8s;
}

JavaScript

$('#square').hover(function() {
  $(this).css('-webkit-animation-name', 'rotate');
});

$('#square').mouseout(function() {
  $(this).on('animationiteration', function() {
    $(this).css('-webkit-animation-name', 'none');
    $(this).replaceWith($(this).clone(true));
  });
});