title: animate speedometer needle with pure css
body: <p>I have tried my best here <a href="http://jsfiddle.net/99oakz7w/" rel="nofollow"><strong>Jsfiddle</strong></a>. Now I want to animate the center needle point slowly to fastly from left to right. I have heard about css  keyframes and tried it. But, it goes left and right. I didn't get the expected result. How do I animate this needle using just pure css? </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#logo
  {
      display: inline-block;
      position: relative;
  }
  #logo .speedometer
  {
      width: 80px;
      height: 80px;
      border-radius: 100%;
      border: 20px solid #000;
      border-right: 20px solid white;
      border-bottom: 20px solid white;
      -webkit-transform: rotate(45deg);
      display: inline-block;
  }
  #logo .needle
  {
      width: 5px;
      height: 50px;
      background: #999999;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      border-top-left-radius: 100%;
      border-top-right-radius: 100%;
      display: inline-block;
      left: 57px;
      position: absolute;
      top: 10px;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="logo"&gt;
      &lt;span class="speedometer"&gt;&lt;/span&gt;
      &lt;span class="needle"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>