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完美配合，只有部分与歌剧有关，而且我的动画几乎都没有在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

CSS动画不适用于safari或opera

1 个答案: