CSS-Animationen ändern Frame-Rate

Question

Betrachten Sie CSS-Animation, um animierte GIFs in ladenden Rädern zu ersetzen.

Es gibt ein einfaches Beispiel hier 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);} 
} 

ich die Framerate verändern will, so dass es nur 12 Frames pro Zyklus ist. Dies würde die Fluidität der Animation, die dem animierten GIF, das sie ersetzt, besser entspricht, ausgleichen.

Kann dies getan werden?

Answer 1

Ändern Sie die Animation in eine verblassende, und verwenden Sie dann das CSS-Transformationsrotationsattribut, um jeden Block in 30-Grad-Intervallen zu fixieren. Wenden Sie die Animation auf jeden einzelnen an, jedoch um .1s verzögert.

.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

Sie möchten steps() für die Beschleunigungsfunktion anstelle von linear verwenden.

-webkit-animation: rotation 2s infinite linear; 

zu:

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

Wo die Zahl innerhalb der steps Funktion ist, wie viele Bilder es die Animation teilen wird

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

Ich habe Ihre Animation Wert von geändert in.

Bit of reference: http://css-tricks.com/snippets/css/keyframe-animation-syntax/ - auf halber Strecke über unten ein Abschnitt über 2 geteilt genannt es gibt Sekunden Schritte()