title: Making a circle with dotted border in css and animating on hover
body: <p>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. </p>
  
  <p>html</p>
  
  <pre><code>&lt;div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>jsfiddle -> <a href="http://jsfiddle.net/uYBKQ/1/" rel="nofollow">http://jsfiddle.net/uYBKQ/1/</a></p>