CSS3アニメーションを使ってStarcraft2のようなオートキャストオーバーレイを作ることは可能ですか？

Question

Starcraft 2には、私のウィジェットの1つのリフレッシュボタンに複製したい素敵なオートキャストアニメーション（http://youtu.be/p34SNJGmNE8?t=50s）があります。

私のボタンが円形であれば、軌道変換を使ってアニメーションを行うことはできますが、私の場合は正方形のボタンで何ができますか？

Answer 1

キーフレームアニメーションはかなり簡単です。

Firefoxは現時点では擬似要素のアニメーション化をサポートしていますが、ここではexample です。

絶対配置された擬似要素の座標をアニメーション化することで機能します。ここ

必要なコードである：

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で移動ボックスの末尾グローをアニメートすることができました。