animate speedometer needle with pure css - html

Question

I have tried my best here Jsfiddle. 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?
CSS
#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;
}
HTML
<div id="logo">
<span class="speedometer"></span>
<span class="needle"></span>
</div>

Answer 1

demo - http://jsfiddle.net/99oakz7w/2/
use #keyframes
#-webkit-keyframes move {
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(-90deg);
}
}
#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;
-webkit-animation: move 5s infinite;
transform: rotate(0deg);
transform-origin: bottom;
}
#-webkit-keyframes move {
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(-90deg);
}
}
<div id="logo"> <span class="speedometer"></span>
<span class="needle"></span>
</div>

Answer 2

design a dashboard gauge for speedmeter.
DEMO
Hope this help.

Answer 3

I could almost do it the needle moves like you want but moves away from the center http://jsfiddle.net/99oakz7w/1/
CSS
#-webkit-keyframes move{
0%{transform:rotate(0deg);}
10%{transform:rotate(-45deg);}
20%{transform:rotate(30deg);}
50%{transform:rotate(80deg);}
100%{transform:rotate(90deg);}
}

Answer 4

Akshay's just needs transform-origin: bottom; after line 28 in the CSS.