Can I make an overlay on AutoCast like Starcraft2 with CSS3 animations?

Question

Starcraft 2 has a nice autostart animation ( http://youtu.be/p34SNJGmNE8?t=50s ) that I want to replicate on the refresh button on one of my widgets.

If my button was circular, I could use the orbit transform for the animation, but what can I do in my case using the square button?

Answer 1

This is pretty easy with keyframe animation.

Unfortunately, only Firefox supports animation of pseudo-elements at the moment, but here is an example of the effect.

.

:

 a {
 display:block; 
 height:50px; width:50px; 
 position:relative;}

 a:after,a:before{
 content:''; 
 width:5px; height:5px; 
 display:block; 
 position:absolute; 
 -moz-animation:  autocast 2s infinite;
 background:black;
 }

 @-moz-keyframes autocast {
    0%   {top:0;    left:0;}
    25%  {top:0;    left:45px;}
    50%  {top:45px; left:45px;}
    75%  {top:45px; left:0;}
    100% {top:0;    left:0;}
 }

 a:before{ -moz-animation-delay: 1s;}

box-shadows, .