Question

如果我错了，请纠正我，但我必须注意反向动画在Safari中不起作用。我不是第一个问这个的人，但由于我还没有找到答案，我发布了这个问题。

有没有办法让Safari中的反转动画有效？ ......或者我应该忘掉它们？

示例：

＆＃13;

<!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>

＆＃13;

Answer 1

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

-webkit-animation-direction：使重复动画每次都朝着相同的方向前进或交替方向。可以设置为正常（默认）或交替。如果设置为alternate，则动画前进和后退 - 从0％到100％，从100％到 0％ - 在交替迭代中。 webkit-animation-iteration-count值必须大于1才能使此属性产生任何影响。

Answer 2

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

<!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>

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

2 个答案: