Blink and rotation - html

Question

I am trying to achieve an infinite blink and rotation together, but the problem I face is quite weird, the blinking which should occur at a regular interval of 500ms, happens nicely for a while then disappears and appears back again.
Also I went through lot of questions around blinking but my test case is different. I can't keep the 0% 50% 100% in the keyframes to get the blinking working because I'd want the span to blink at a particular percentage I specify.
For example: I'd want the span to blink at 100deg or 90deg, so I should be able to specify the blink timing by specifying the exact percentage value.
Here's my work so far, any help would be appreciated. http://jsfiddle.net/8UQ8X/7/ (includes vendor prefixes)
<div>
<span></span>
</div>
<style>
div{
position: fixed;
width:3px;
height:100px;
left: 300px;
top: 100px;
border: 1px rgba(255,255,255,0.1) solid;
-webkit-animation: spin 500ms steps(30) infinite;
-webkit-transform-origin: center center;
-webkit-transform: translate3d(0, 0, 0);
}
span{
display:block;
width: 2px;
height: 2px;
border-radius: 50%;
-webkit-animation: blink 500ms infinite steps(1);
}
#-webkit-keyframes spin {
from{
-webkit-transform: rotate(0deg)
}
to{
-webkit-transform: rotate(360deg)
}
}
#-webkit-keyframes blink {
// I should be able to any percentage value to get the span blink at a particular degree.
// for now I am trying to blink the span at 0%, the beginning, later I might change it to 50% or something
0% {background: #fff}
1% {background: none;}
}
body{
background: #232323;
}
</style>

Answer 1

Try this : Animation
.i{
position: fixed;
width:10px;
height:150px;
left: 300px;
top: 100px;
border: 1px rgba(255,255,255,0.1) solid;
-webkit-animation: spin 500ms steps(30) infinite;
-webkit-transform-origin: center center;
-webkit-transform: translate3d(0, 0, 0);
-moz-animation: spin 500ms steps(30) infinite;
-moz-transform-origin: center center;
-moz-transform: translate3d(0, 0, 0);
-webkit-animation-timing-function:ease-in-out;
}
span{
display:block;
width: 10px;
height: 10px;
border: 1px rgba(255,255,255,0.1) solid;
border-radius: 50%;
-webkit-animation: blink 500ms infinite steps(1);
-moz-animation: blink 500ms infinite steps(1);
-webkit-animation-timing-function:liner;
}
#-webkit-keyframes spin {
from{
-webkit-transform: rotate(0deg)
}
to{
-webkit-transform: rotate(360deg)
}
}
#-moz-keyframes spin {
from{
-moz-transform: rotate(0deg)
}
to{
-moz-transform: rotate(360deg)
}
}
#-webkit-keyframes blink {
0% {background: #fff}
1% {background: none;}
}
#-moz-keyframes blink {
0% {background: #fff}
1% {background: none;}
}
body{
background: #232323;
}