CSS 애니메이션 프레임 속도 변경

Question

로딩 휠에서 애니메이션 GIF를 대체 할 CSS 애니메이션을 살펴보십시오.

여기에 기본 예제 내가 사이클 당 12 프레임이되도록 프레임 속도를 변경하려는 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);} 
} 

있습니다. 애니메이션으로 대체 된 애니메이션 GIF와 더 밀접하게 일치하는 애니메이션의 유동성이 제거됩니다.

이 작업을 수행 할 수 있습니까?

Answer 1

페이딩으로 애니메이션을 변경 한 다음 CSS 변환 회전 속성을 사용하여 각 블록을 30도 간격으로 고정합니다. 0.1 초 지연되지만 각 애니메이션을 적용하십시오.

.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 대신 여유 함수로 steps()을 사용하려고합니다.

-webkit-animation: rotation 2s infinite linear; 

에 :

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

나는에서 애니메이션 값을 변경 한

steps 함수 내에서 숫자가 애니메이션을 분할 얼마나 많은 프레임입니다

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

으로. 참조

비트 : http://css-tricks.com/snippets/css/keyframe-animation-syntax/은 - 12 단계를 2 초 동안 나누어 약 반쯤 섹션은 단계()