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動畫嗎？

回答

相關問題