html - cssで点線の境界線で円を作り、ホバーでアニメーション化する

Question

CSSサークルをアニメーション化しようとしています。ユーザーがカーソルを合わせると、円の境界が点線になり、糸車のように動くはずです。一定時間回転させることはできますが、マウスポインターがその上に置かれるまでアニメーション化する方法を見つけることができず、マウスポインターが円から外れて点線の境界線を作成するとアニメーションを停止します。

html

<div>
</div>

CSS

div {
    background: red;
    border: 5px solid green;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    transition: all 5s ease-in-out;
}

div:hover {
     transform:rotate(180deg);
     border: 5px dotted blue;
}

jsfiddle -> http://jsfiddle.net/uYBKQ/1/