CSS3動畫暫停/恢復跳躍和WebKit中

跳躍我已經實現動畫暫停如下所述： How to pause and resume CSS3 animation using JavaScript?CSS3動畫暫停/恢復跳躍和WebKit中

這裏是我的旋轉元件CSS：

.is-rotating{ 
    -webkit-animation: circle 55s linear infinite; 
    -moz-animation: circle 55s linear infinite; 
    -ms-animation: circle 55s linear infinite; 
    animation: circle 55s linear infinite; 
}

我切換一個is-paused類有問題的元素onmouseover：

.is-paused{ 
    -webkit-animation-play-state:paused; 
    -moz-animation-play-state:paused; 
    -o-animation-play-state:paused; 
    animation-play-state:paused; 
}

當我用JS（on鼠標移出），旋轉動畫重置爲「原點」。有時候，有時候不會。這發生在webkit（OSX上的Chrome和Safari）中，在FF中正常工作。

我知道animation-play-state是一個實驗性功能，但是MDN says it should work fine in webkit。有沒有人有任何想法如何實施的WebKit瀏覽器？

UPDATE：這裏是CSS的其餘部分：

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

@-moz-keyframes circle { 
    from { -moz-transform:rotate(0deg); } 
    to { -moz-transform:rotate(360deg); } 
} 
@-moz-keyframes inner-circle { 
    from { -moz-transform:rotate(0deg); } 
    to { -moz-transform:rotate(-360deg); } 
} 

@-ms-keyframes circle { 
    from { -ms-transform:rotate(0deg); } 
    to { -ms-transform:rotate(360deg); } 
} 
@-ms-keyframes inner-circle { 
    from { -ms-transform:rotate(0deg); } 
    to { -ms-transform:rotate(-360deg); } 
} 

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

來源

2012-12-14 Benjamin Smith

你試過animation-fill-mode: forwards？這指定在動畫結束時，它應該保持其最終樣式，而不是恢復到其預先動畫狀態。

來源

2012-12-14 15:17:42 RachelNabors

沒有骰子 - 這個屬性沒有按解決不了問題，行爲沒有改變。我嘗試了'倒退'和'前進'和'兩個' - 仍然沒有。謝謝 –

我在Webkit瀏覽器中也遇到過類似的CSS動畫問題。這個問題，在我的情況，是我使用的CSS屬性transform，像這樣：

@keyframes float { 
    0% { transform: translateY(0px); } 

    50% { transform: translateY(20px); } 

    100% { transform: translateY(0px); } 
}

此暫停/播放動畫與animation-play-state屬性時造成的毛刺/跳。用top代替transform解決了webkit瀏覽器中的跳躍問題。

@keyframes float { 
    0% { top: 0px; } 

    50% { top: 20px; } 

    100% { top: 0px; } 
}

來源

2013-04-10 15:11:56 pruett

我正在使用'transform：rotate（）'而不是'translateY';是否有可能讓你的答案適應我的情況？ –

我不得不使用CSS基於動畫三維旋轉木馬產品目錄在兩個方向跳動的同味：懸停。

已經擺脫了像動畫填充模式：轉發和類似明顯的想法，並沒有最少的好運，最終解決了它是混合兩個位的轉換語法與一個微小的持續時間和轉換本身作爲屬性。在過渡追捉變換的狀態的過程中，它的更新要被改造的元素保持完好，而且效果似乎符合規格，所以它應該是一個有效的解決方案

transition-duration: 0.2s;transition-property:transform;

來源

2013-09-25 18:50:16 user784509

CSS3動畫暫停/恢復跳躍和WebKit中

回答

相關問題