css - css3アニメーションがアニメーション終了時にアニメーション位置にとどまるようにするにはどうすればよいですか?

Question

重複の可能性:
Webkit CSS アニメーションの問題 - アニメーションの終了状態を保持していますか?

実行が終了したときに、アニメーション化された div の位置を維持したいと考えています。現在、マウス ホバーで div をアニメーション化していますが、まだホバーしていても div は元の位置に戻ります。

マウスアウトしたときだけ元に戻す方法はありますか?

http://jsfiddle.net/neoswf/X5a64/

div{
    width:100px;height:100px;margin:1em;background:red
}
div:hover {
  -webkit-animation-name: rotateThis;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-transform: translateZ(0);
}
@-webkit-keyframes rotateThis {
  from { -webkit-transform:scale(1) rotate(0deg); }
  to { -webkit-transform:scale(1.1) rotate(100deg); }
}​