CSS不透明度動畫safari bug？

我有一個簡單的動畫（僅適用於Safari瀏覽器在這個例子中）：CSS不透明度動畫safari bug？

h1 { 
    -webkit-animation: moveDown 1s ease-in-out; 
} 

@-webkit-keyframes moveDown { 
    0% {-webkit-transform: translateY(-20px); opacity: 0;} 
    100% {-webkit-transform: translateY(0px); opacity: 1;} 
}

在最新的Safari瀏覽器（5.1.5），它工作得很好。

但偶然我在一個較舊的Safari瀏覽器（5.0.6）中看到的例子，什麼也沒看到。 h1消失了。

通過一種加入了無 - 旋轉（不透明度&動畫作品）觸發eather的：

@-webkit-keyframes moveDown { 
    0% {-webkit-transform: translateY(-20px) rotate(0deg); opacity: 0;} 
    100% {-webkit-transform: translateY(0px) rotate(0deg); opacity: 1;} 
}

或1％開始（不透明度不工作，但動畫）：

@-webkit-keyframes moveUp{ 
    1% {-webkit-transform: translateY(-20px); opacity: 0;} 
    100% {-webkit-transform: translateY(0px); opacity: 1;} 
}

它再次工作。

現在，這使我兩個嚴重的問題：

有什麼我做錯了在第一個例子嗎？
Safari瀏覽器舊版本中有一個已知的錯誤，我應該對待不同的錯誤嗎？

原因：

，如果你不能看到不支持的瀏覽器的動畫我不介意（這是一個不錯的補充上），但它會被敢於不知道什麼時候你動畫元素不再顯示出來。

我怎麼能夠將動畫作爲附加組件使用而不用擔心？

如果有人問小提琴：我嘗試重新創建小提琴。但這裏還有一件有趣的事情：完全相同的代碼在jsfiddle中的舊Safari中沒有任何效果。它也不是動畫或消散。

~~編輯：~~

~~我只是看到了H1不與原來的代碼了dissapearing（我不能重建它），但沒有做任何動畫eather。它只適用於所描述的觸發器之一。~~

JS-FIDDLE：

Here a working fiddle with the two examples.

來源

2012-06-07 Melros

你能提供一個你正在嘗試使用這個html的例子嗎？ –

我剛剛加了一個小提琴，現在我用這種方式工作。如果您使用舊的Safari（5.0.6），正確的代碼將不起作用。只有被觸發的人會這樣做。 – Melros

我沒有舊版本的Safari瀏覽器方便的，但我記得在舊版本與動畫播放和遇到此類錯誤。我通過在選擇器中放置'結束狀態'來解決這些問題。 p {opacity: 1}http://jsfiddle.net/pkFaT/

來源

2012-06-07 15:38:21 Duopixel

首先，謝謝你告訴我這是一種明顯的錯誤。但你的解決方案（我也試過）不影響任何東西。仍然卡在程度觸發。你會說這隻能發生在Safari嗎？或者至少只是爲了不透明？我不介意使用它來確保內容至少不會消失。其他人知道錯誤？ – Melros

我接受回答，告訴我這是一個已知錯誤的反饋。但我會保持目前的程度觸發。 – Melros

CSS不透明度動畫safari bug？

回答

相關問題