CSS 动画不适用于 safari 或 Opera

Question

我无法将我网站上的动画用于 safari 和 Opera。我到处都使用了所有前缀，并且对此进行了很多研究以确保我的代码是正确的，但是一定有一些我仍然缺少的东西。请查看下面的代码，并就如何进行操作给我一些建议。

@-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 或部分来调用 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;}

然后只需将您的类分配给所需的元素。 希望能解决一切！

-乔尔