CSS3動畫不播放始終

我有一個簡單的CSS動畫，看起來像下面這樣：CSS3動畫不播放始終

@-webkit-keyframes 'move-domo' { 
    0% { bottom: 0px; left: 24px; } 
    5% { bottom: 5px; } 
    10% { bottom: 0px; } 
    15% { bottom: 5px; } 
    20% { bottom: 0px; } 
    25% { bottom: 5px; } 
    30% { bottom: 0px; } 
    35% { bottom: 5px; } 
    40% { bottom: 0px; } 
    45% { bottom: 5px; } 
    50% { bottom: 0px; left: 300px; } 
    55% { bottom: 5px; } 
    60% { bottom: 0px; } 
    65% { bottom: 5px; } 
    70% { bottom: 0px; } 
    75% { bottom: 5px; } 
    80% { bottom: 0px; } 
    85% { bottom: 5px; } 
    90% { bottom: 0px; } 
    95% { bottom: 5px; } 
    100% { bottom: 0px; left: 24px; } 
}

在Chrome中，它的工作原理我希望它，但在Safari瀏覽器，它不打球的方式我期望的方式 - 首先播放所有「底部」動畫，然後在最後衝過「左側」動畫。

您可以在http://kylehayes.me

來源

2010-11-13 Kyle Hayes

刪除html5標記爲html5！= css3，它可能會混淆其他人。 – 2010-11-15 17:38:55

謝謝，好點。 – 2010-11-17 00:47:18

Safari是正確的行爲。當動畫關鍵幀未指定值時，它應該使用基礎對象上的值。 Chrome插入丟失的關鍵幀值。

該動畫正確地將圖像保持在其原始位置，然後在15秒內將其移動到300px（您在動畫中指定的總動畫的50％ - 我查看了您的源）。然後將其移回到下一個關鍵幀的原始位置。

您可以通過在每個關鍵幀中指定左側的適當中間值，或者將水平動畫放在垂直動畫的包裝div中來解決此問題。

來源

2010-11-14 17:39:50

啊，這是有道理的。謝謝。我有一種感覺，Safari會是正確的。關於包裝div的好建議。謝謝！ – 2010-11-15 15:55:14

嘗試看到的行爲使用「-webkit-變換：翻譯」，而不是頂部，底部，左，右屬性。

來源

2010-11-13 22:12:55

這對上述提供了什麼優勢？ – 2010-11-14 00:00:28

不必手動指定每個插值。 – Dykam 2010-11-15 19:11:44

CSS3動畫不播放始終

回答

相關問題