CSS動畫不適用於野生動物園或歌劇

Question

我在將網站上的動畫制作為野生動物園和歌劇時遇到問題。 我在所有地方都使用了所有前綴，並且對此進行了很多研究，以確保我的代碼正確無誤，但是仍然有某些地方我仍然缺少。 請查看下面的代碼，並給我一些有關如何進行的建議。

@-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;}

最后，我通過將此類添加到所需的div或section來用Jquery在文檔加載時調用這些動畫。

問題是，我的動畫可以完美地與mozilla和chrome配合使用，而只能部分地與Opera配合使用，而我的動畫幾乎都無法在Safari中使用。 哦，我的文檔加載Jquery似乎也無法在Opera中使用-它只是在加載整個頁面之前啟動可以正常工作的動畫。

Answer 1

目前，它正在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