Chrome瀏覽器不支持Safari瀏覽器的CSS動畫

Question

我想要一個div，當絕對位置用css3動畫改變位置時。 該技巧適用於Chomre（webkit），但不適用於iDevices的Safari。

在Safari也做了以下內容： 出現緩慢 改變位置忽（smothly鉻） 慢慢消失

什麼可以？謝謝諮詢

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
0% {opacity: 0; bottom: 2px; right: 5%;} 
25% {opacity: 1; bottom: 2px; right: 5%;} 
75% {opacity: 1; bottom: 40%; right: 5%;} 
100% {opacity: 0; bottom: 40%; right: 5%;} 
} 

我試圖從0％= 100％=並獲得相同的行爲

編輯 - >解決 * * Safari瀏覽器不要讓我做底：2px的;右：5％;到底部：40％;右：5％; * *所有值必須是同一類型，百分比或PX * *這將工作：

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
0% {opacity: 0; bottom: 1%; right: 5%;} 
25% {opacity: 1; bottom: 1%; right: 5%;} 
75% {opacity: 1; bottom: 40%; right: 5%;} 
100% {opacity: 0; bottom: 40%; right: 5%;} 
} 

Answer 1

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
0% {opacity: 0; bottom: 1%; right: 5%;} 
25% {opacity: 1; bottom: 1%; right: 5%;} 
75% {opacity: 1; bottom: 40%; right: 5%;} 
100% {opacity: 0; bottom: 40%; right: 5%;} 
}