Safari可以播放反向css3动画吗？

如果我错了，请纠正我，但我必须注意，反向动画在Safari中不起作用。我不是第一个问这个问题的人，但是因为我还没有找到答案，所以我发布了这个问题。Safari可以播放反向css3动画吗？

有没有什么办法可以在Safari中制作反向动画？ ...或者我应该忘记他们？

实施例：

<!DOCTYPE html> 
 
<head> 
 
<style> 
 
div{ 
 
Background-color: red; 
 
font-size:2vw; 
 
position:fixed; 
 
top:40%; 
 
right:0%; 
 
width:100%; 
 
height:12%; 
 
/*animation*/ 
 
-webkit-animation:test_drive 5s; 
 
    -moz-animation:test_drive 5s; 
 
    -ms-animation:test_drive 5s; 
 
    -o-animation:test_drive 5s; 
 
     animation:test_drive 5s; 
 
/*animation-direction*/ 
 
-webkit-animation-direction:reverse; 
 
    -moz-animation-direction:reverse; 
 
    -ms-animation-direction:reverse; 
 
    -o-animation-direction:reverse; 
 
     animation-direction:reverse; 
 
z-index:3; 
 
} 
 
@-webkit-keyframes test_drive{ 
 
0% {left:0%; top:40%;} 
 
100% {left:0%; top:88%;} 
 
} 
 
@-ms-keyframes test_drive{ 
 
0% {left:0%; top:40%;} 
 
100% {left:0%; top:88%;} 
 
} 
 
@-moz-keyframes test_drive{ 
 
0% {left:0%; top:40%;} 
 
100% {left:0%; top:88%;} 
 
} 
 
@-o-keyframes test_drive{ 
 
0% {left:0%; top:40%;} 
 
100% {left:0%; top:88%;} 
 
} 
 
@keyframes test_drive{ 
 
0% {left:0%; top:40%;} 
 
100% {left:0%; top:88%;} 
 
} 
 
</style> 
 
<title>Test_Drive</title> 
 
</head> 
 

 
<body> 
 
    <div>Unlike Chrome, Firefox, Opera or IE, Safari plays this in "normal" direction.</div> 
 
</body> 
 

 
</html>

来源

2014-09-26 Andrej Ilic

我在您的代码中做了一些更改。请看下面给出的代码。它工作正常。

<!DOCTYPE html> 
<head> 
<style> 
div{ 
Background-color: red; 
font-size:2vw; 
position:fixed; 
top:40%; 
right:0%; 
width:100%; 
height:12%; 
/*animation*/ 
-webkit-animation:test_drive 5s; 
    -moz-animation:test_drive 5s; 
    -ms-animation:test_drive 5s; 
    -o-animation:test_drive 5s; 
     animation:test_drive 5s; 
/*animation-direction*/ 
-webkit-animation-direction:normal; 
    -moz-animation-direction:reverse; 
    -ms-animation-direction:reverse; 
    -o-animation-direction:reverse; 
     animation-direction:reverse; 
z-index:3; 
} 
@-webkit-keyframes test_drive{ 
0% {left:0%; top:88%;} 
100% {left:0%; top:40%;} 
} 
@-ms-keyframes test_drive{ 
0% {left:0%; top:40%;} 
100% {left:0%; top:88%;} 
} 
@-moz-keyframes test_drive{ 
0% {left:0%; top:40%;} 
100% {left:0%; top:88%;} 
} 
@-o-keyframes test_drive{ 
0% {left:0%; top:40%;} 
100% {left:0%; top:88%;} 
} 
@keyframes test_drive{ 
0% {left:0%; top:40%;} 
100% {left:0%; top:88%;} 
} 
</style> 
<title>Test_Drive</title> 
</head> 

<body> 
    <div>Unlike Chrome, Firefox, Opera or IE, Safari plays this in "normal" direction.</div> 
</body> 

</html>

来源

2014-09-26 11:59:09 Ashish

感谢您的纠正。 – 2014-09-26 12:31:03

不过，我不明白为什么它真的有效。每个浏览器都会在相反时播放它。 – 2014-09-26 13:09:05

你投了票，但我错误的我点击箭头，所以失去了声誉。你能否再请一遍。 – Ashish 2014-09-26 13:09:51

从Safari Developer docs，Safari支持-webkit-animation-direction与normal（默认）或alternate值。它不支持reverse。

-webkit动画方向：原因重复动画或是在同一方向上的每个时间进行或以交替的方向。可以设置为正常（默认）或备用。如果设置为交替，则在交替迭代中动画前进和后退 - 从0％到100％和从100％到 0％。 webkit-animation-iteration-count值必须大于one1才能使此属性有任何效果。

来源

2014-09-26 11:37:56 rnevius

另请参见有关浏览器兼容性的详细信息的[Mozilla开发文档]（https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction#Browser_compatibility）。 – rnevius 2014-09-26 11:40:07

感谢您的回答。 – 2014-09-26 12:56:51

Safari可以播放反向css3动画吗？

回答

相关问题