지연 CSS3 회전 애니메이션

Question

좋아, 그래서 (애니메이션에서 반복 타임 아웃과 함께) 회전 CSS3 애니메이션을 가지고 있지만 애니메이션이 뒤로 움직이는 것처럼 보이는이 이상한 행동을하고 있습니다.

내가 JS 바이올린 여기 데모가 (편집이 - 긴 지연을 용서하십시오,이 애니메이션의 필요한 부분 - 오랜 시간 제한) : 후세에 대한 http://jsfiddle.net/3mnMz/1/

, 여기 내 CSS

입니다

#logo { position: relative; float: left; width: 175; height: 75px; margin: 0 0 16px; padding: 0; } 

@-webkit-keyframes rotate { 
    0%, 65%, 75%, 100% { 
    -webkit-transform: rotate(0deg); 
    } 
    70% { 
    -webkit-transform: rotate(360deg); 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-delay: 3s; 
    } 
} 
#logo span.star 
{ 
    -webkit-animation-name:    rotate; 
    -webkit-animation-duration:   6s; 
    -webkit-animation-iteration-count: infinite; 
} 

#logo span.star { width: 84px; height: 84px; background: url('../img/logo_star.png') no-repeat left top; position: absolute; top: -8px; right: -20px; display: block; 
} 

누군가 주제에 대해 밝힐 수 있습니까?

Answer 1

나는 당신이 달성하고자하는 것에 대해 확실하지 않지만 회전이 앞뒤로 회전하는 이유는 회전이 360, 그 다음 회전이 75 인 키 프레임을 70 %라고 말하기 때문입니다. , 원래 상태로 돌아갑니다.

애니메이션 속성은 또한 키 프레임이 아닌 span.star 요소 내에 있어야합니다. 그 것이었다 http://jsfiddle.net/3VrjE/