Is it possible to make a Starcraft2-like autocast overlay using CSS3 animations?

Question

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

If my button were circular, it would be possible to use an orbit transform to do the animation but what can I do in my case with a square button?

Answer 1

It's fairly easy with keyframe animation.

Unfortunately only Firefox supports animating pseudo elements at this time, but here is an example of the effect.

It works by animating the absolute positioned pseudo-element coordinates.

Here is the necessary code:

 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;}

You could also animate the trailing glow of the moving boxes with multiple box-shadows, perhaps.