不能用於Safari或Opera的CSS動畫

我的網站上的動畫獲取Safari和Opera的工作時遇到問題。我已經使用了所有的前綴，並且我已經研究了很多以確保我的代碼是正確的，但是一定有一些我仍然缺少。請看下面的代碼，並告訴我如何繼續。不能用於Safari或Opera的CSS動畫

@-webkit-keyframes moves { 
from { 
    transform: translate(0px,0px); 
    -webkit-transform: translate(0px,0px); 
    -o-transform: translate(0px,0px); 
    -moz-transform: translate(0px,0px); 
    } to { 
    transform: translate(-45%, -100%); 
    -webkit-transform: translate(-45%, -100%); 
    -o-transform: translate(-45%, -100%); 
    -moz-transform: translate(-45%, -100%); 
    }} 
@-moz-keyframes moves { 
from { 
    transform: translate(0px,0px); 
    -webkit-transform: translate(0px,0px); 
    -o-transform: translate(0px,0px); 
    -moz-transform: translate(0px,0px); 
    } to { 
    transform: translate(-45%, -100%); 
    -webkit-transform: translate(-45%, -100%); 
    -o-transform: translate(-45%, -100%); 
    -moz-transform: translate(-45%, -100%); 
    }} 
@-o-keyframes moves { 
from { 
    transform: translate(0px,0px); 
    -webkit-transform: translate(0px,0px); 
    -o-transform: translate(0px,0px); 
    -moz-transform: translate(0px,0px); 
    } to { 
    transform: translate(-45%, -100%); 
    -webkit-transform: translate(-45%, -100%); 
    -o-transform: translate(-45%, -100%); 
    -moz-transform: translate(-45%, -100%); 
    }} 
@keyframes moves { 
from { 
    transform: translate(0px,0px); 
    -webkit-transform: translate(0px,0px); 
    -o-transform: translate(0px,0px); 
    -moz-transform: translate(0px,0px); 
    } to { 
    transform: translate(-45%, -100%); 
    -webkit-transform: translate(-45%, -100%); 
    -o-transform: translate(-45%, -100%); 
    -moz-transform: translate(-45%, -100%); 
    }}

這是我打電話給我的動畫：

.move { 
-webkit-animation: moves 4s 2.5s forwards; 
-moz-animation: moves 4s 2.5s forwards; 
-o-animation: moves 4s 2.5s forwards; 
animation: moves 4s 2.5s forwards;}

最後，我呼籲用jQuery文檔加載這些動畫加入這個類所需的股利或部分。

問題是，我的動畫與mozilla和chrome完全兼容，只是部分與opera相關，幾乎沒有我的動畫在safari中工作。哦，我的文檔加載Jquery似乎也不適用於Opera - 它只是啓動在整個頁面加載之前工作的動畫。

來源

2015-11-01 Teodor Mavrodiev

它現在正在Safari和Chrome中工作（不想下載Opera atm）。您使用的是很多供應商前綴所在的地區，你只需要一個^ _ ^：

https://jsfiddle.net/JTBennett/egfw1392/

@keyframes moves { 
from { 
    transform: translate(0px,0px); 
    } to { 
    transform: translate(-45%, -100%); 
    }} 
@-webkit-keyframes moves { 
from { 
    -webkit-transform: translate(0px,0px); 
    } to { 
    -webkit-transform: translate(-45%, -100%); 
    }} 
@-moz-keyframes moves { 
from { 
    -moz-transform: translate(0px,0px); 
    } to { 
    -moz-transform: translate(-45%, -100%); 
    }} 
@-o-keyframes moves { 
from { 
    -o-transform: translate(0px,0px); 
    } to { 
    -o-transform: translate(-45%, -100%); 
    }} 
@-ms-keyframes moves { 
    from { 
     -ms-transform: translate(0,0); 
    } to { 
     -ms-transform: translate(-45%,-100%); 
    }} 




.moves { 
-webkit-animation: moves 4s 2.5s forwards; 
-moz-animation: moves 4s 2.5s forwards; 
-o-animation: moves 4s 2.5s forwards; 
animation: moves 4s 2.5s forwards;}

然後，只需分配你的類所需的元素。希望能解決所有問題！

-Joel

來源

2015-11-02 00:32:37 Joel

謝謝你的努力Joel！ –

你得到它的工作？如果你想在所有瀏覽器和設備上保證它的功能，我們可以製作一個jQuery腳本來執行這個動畫。它實際上也會小很多 - 如果你願意，我可以把它放在你身上。 – Joel

https://jsfiddle.net/JTBennett/tazw1m4y/13/ ^這是相同動畫的jQuery代碼 - 沒有兼容性問題/供應商前綴與此。讓我知道你是否需要更多的幫助。 – Joel

不能用於Safari或Opera的CSS動畫

回答

相關問題