I'm trying to animate a css circle. When the user hovers it, the border of the circle should become a dotted line and it should animate like a spinning wheel. I can make it spin for a given time, but I couldn't find a way to animate it until the mouse pointer hovers on it and then stop the animation when the mouse pointer is taken out of the circle and make a dotted border. 

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/>