不能用于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动画

回答

相关问题