¿Es posible hacer una superposición de autocast de Starcraft2 utilizando animaciones CSS3?

Question

Starcraft 2 tiene una buena animación de autocast (http://youtu.be/p34SNJGmNE8?t=50s) que quiero replicar en el botón de actualización en uno de mis widgets.

Si mi botón fuera circular, sería posible usar una transformación en órbita para hacer la animación, pero ¿qué puedo hacer en mi caso con un botón cuadrado?

Answer 1

Es bastante fácil con la animación de fotogramas clave.

Desafortunadamente, solo Firefox admite la animación de pseudo elementos en este momento, pero aquí hay un example del efecto.

Funciona mediante la animación de las coordenadas de pseudo-elemento de posición absoluta.

Aquí es el código necesario:

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

También podría animar el resplandor de arrastre de las cajas que se mueven con múltiples box-shadows, tal vez.