CSS Animasyonlar Çerçeve Hızını Değiştir

Question

Hareketli tekerleklerdeki hareketli GIF'leri değiştirmek için CSS animasyonuna bakın.

burada basit bir örnek bir döngü başına sadece 12 kare vardır, böylece çerçeve hızını değiştirmek isteyen http://jsfiddle.net/kFmY8/448/

#me { 
    -webkit-animation: rotation 2s infinite linear; 
} 

@-webkit-keyframes rotation { 
    from {-webkit-transform: rotate(0deg);} 
    to {-webkit-transform: rotate(360deg);} 
} 

bulunmaktadır. Bu, animasyonun akışkanlığını, değiştirdiği animasyonlu GIF ile daha yakından eşleştirir.

Bu yapılabilir mi?

Answer 1

Animasyonu solan bir renge dönüştürün, ardından her bloğu 30 derecelik aralıklarla sabitlemek için CSS dönüş dönüşü özelliğini kullanın. Animasyonu her birine uygulayın ancak .1s ile geciktirin.

.wheel { 
    position:absolute; display:none; 
} 
.wheel li { 
    width:4px; height:11px; position:absolute; -webkit-transform-origin:3px 21px; background:#222; border-radius:4px; list-style:none; display:block; opacity:.25; box-shadow:0 0 1px rgba(255,255,255,0.9); 
} 
.wheel li:nth-child(1) { -webkit-transform:rotate(30deg); -webkit-animation:fadeshift 1.2s infinite linear 0s; } 
.wheel li:nth-child(2) { -webkit-transform:rotate(60deg); -webkit-animation:fadeshift 1.2s infinite linear 0.1s; } 
.wheel li:nth-child(3) { -webkit-transform:rotate(90deg); -webkit-animation:fadeshift 1.2s infinite linear 0.2s; } 
.wheel li:nth-child(4) { -webkit-transform:rotate(120deg); -webkit-animation:fadeshift 1.2s infinite linear 0.3s; } 
.wheel li:nth-child(5) { -webkit-transform:rotate(150deg); -webkit-animation:fadeshift 1.2s infinite linear 0.4s; } 
.wheel li:nth-child(6) { -webkit-transform:rotate(180deg); -webkit-animation:fadeshift 1.2s infinite linear 0.5s; } 
.wheel li:nth-child(7) { -webkit-transform:rotate(210deg); -webkit-animation:fadeshift 1.2s infinite linear 0.6s; } 
.wheel li:nth-child(8) { -webkit-transform:rotate(240deg); -webkit-animation:fadeshift 1.2s infinite linear 0.7s; } 
.wheel li:nth-child(9) { -webkit-transform:rotate(270deg); -webkit-animation:fadeshift 1.2s infinite linear 0.8s; } 
.wheel li:nth-child(10) { -webkit-transform:rotate(300deg); -webkit-animation:fadeshift 1.2s infinite linear 0.9s; } 
.wheel li:nth-child(11) { -webkit-transform:rotate(330deg); -webkit-animation:fadeshift 1.2s infinite linear 1s; } 
.wheel li:nth-child(12) { -webkit-transform:rotate(360deg); -webkit-animation:fadeshift 1.2s infinite linear 1.1s; } 
@-webkit-keyframes fadeshift { 
    from { opacity:1; } to { opacity:.1; } 
} 

<div class="appload wheel"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></div> 

QED.

Answer 2

linear yerine hareket hızı işlevi için steps() kullanmak istiyorsunuz.

-webkit-animation: rotation 2s infinite linear; 

için:

http://jsfiddle.net/trolleymusic/uTd3x/

ben adresinin animasyon değerini değiştirdik

steps işlevi içinde sayı animasyon bölmek kaç kare olan

-webkit-animation: rotation 2s infinite steps(12); 

içine. referans

Bit: http://css-tricks.com/snippets/css/keyframe-animation-syntax/-12 adımlar 2 saniyeden fazla bölünür olarak yaklaşık yarıya kadar bir bölümü, Adımlar()