title: Blink and rotation
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>Here's my work so far, any help would be appreciated. <a href="http://jsfiddle.net/8UQ8X/7/" rel="nofollow">http://jsfiddle.net/8UQ8X/7/</a> (includes vendor prefixes)</p>
  
  <pre><code>&lt;div&gt;
    &lt;span&gt;&lt;/span&gt;
   &lt;/div&gt;
  
  &lt;style&gt;
  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;
  }
  &lt;/style&gt;
  </code></pre>