CSS3延遲旋轉動畫

好的，所以我有這個旋轉的CSS3動畫（在動畫中有重複超時）幾乎工作，但我得到了這個非常奇怪的行爲，動畫似乎「向後跳躍」，因爲它的動畫。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; 
}

有人可以對這個問題有所瞭解嗎？

來源

2011-10-16 Brian

我不確定你想要實現什麼，但它來回旋轉的原因是因爲你在關鍵幀70％中說旋轉是360，然後在75它是旋轉0 ，所以它回到原來的狀態。

動畫屬性還應該在span.star元素中聲明，而不是在關鍵幀中聲明。

這裏是一個演示： http://jsfiddle.net/3VrjE/

來源

2011-10-16 13:18:06 Duopixel

這就是它！我完全理解CSS3語言的語法和語義是如何工作的，這絕對是我的錯。 – Brian

CSS3延遲旋轉動畫

回答

相關問題