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