Question

我有一个简单的动画（在本例中仅适用于Safari）：

h1 {
    -webkit-animation: moveDown 1s ease-in-out;
}

@-webkit-keyframes moveDown {
    0% {-webkit-transform: translateY(-20px); opacity: 0;}
    100% {-webkit-transform: translateY(0px); opacity: 1;}
}

在最新的Safari（5.1.5）中它运行得很好。

但偶然的是我在一个较旧的Safari（5.0.6）中查看了这个例子并且没有看到任何内容。 h1消失了。

通过添加非旋转（不透明和动画作品）来触发播放：

@-webkit-keyframes moveDown {
    0% {-webkit-transform: translateY(-20px) rotate(0deg); opacity: 0;}
    100% {-webkit-transform: translateY(0px) rotate(0deg); opacity: 1;}
}

或从1％开始（不透明度不起作用，但动画）：

@-webkit-keyframes moveUp{
    1% {-webkit-transform: translateY(-20px); opacity: 0;}
    100% {-webkit-transform: translateY(0px); opacity: 1;}
}

它再次起作用。

这引出了两个严肃的问题：

在第一个例子中我有什么问题吗？
旧版Safari中是否存在已知错误，我应该区别对待？

原因：

我不介意你是否在非支持浏览器中看不到动画（它只是一个很好的添加）但是它不敢知道你的动画元素何时不再显示。< / p>

我怎么能一般地使用动画作为附加组件而不用担心呢？

如果有人要求小提琴：我尝试重新创作它。但这是另一个有趣的事情：完全相同的代码在jsfiddle中的旧Safari中没有任何效果。它也没有动画或消失。

<击> 修改

~~我只是看到h1不再与原始代码消失（我无法重建它），但不会做任何动画播放。它只适用于所描述的触发器之一。~~

JS-FIDDLE：

Here a working fiddle with the two examples.

Answer 1

我没有旧版本的Safari，但我记得在旧版本中使用动画，并遇到了这些类型的错误。我通过将'结束状态'放在选择器中来解决它们，例如p {opacity: 1} http://jsfiddle.net/pkFaT/

CSS不透明动画safari bug？

1 个答案: