CSS3 animasyonlarını kullanarak Starcraft2 benzeri bir otomatik yayın yerleştirme yapmak mümkün mü?

Question

Starcraft 2, benim widget'larımın üzerindeki yenileme düğmesine çoğaltmak istediğim güzel bir otomatik animasyon (http://youtu.be/p34SNJGmNE8?t=50s) özelliğine sahiptir.

Düğmem döngüsel olsaydı, animasyon yapmak için bir yörünge dönüşümü kullanmak mümkün olurdu, ancak benim durumumda bir kare düğme ile ne yapabilirim?

Answer 1

Animasyon animasyonu ile oldukça kolaydır.

Ne yazık ki yalnızca Firefox, sözde öğelerin animasyonunu şu anda destekliyor, ancak burada bir example etkisi var.

Mutlak konumlandırılmış sözde öğe koordinatlarını canlandırarak çalışır.

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

Ayrıca belki birden box-shadows ile hareket eden kutuların sondaki parlaklık animasyon olabilir:

İşte gerekli koddur.