3

我有一个简单的动画（在本例中仅适用于 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没了。

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

@-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;}
}

它再次起作用了。

这让我想到了两个严肃的问题：

  1. 在第一个示例中我做错了什么吗？
  2. 旧版本的 Safari 中是否存在我应该区别对待的已知错误？

原因：

我不介意您在不支持的浏览器中看不到动画（这只是一个不错的附加功能），但如果您的动画元素不再出现，我会敢于不知道。

我怎样才能在一般情况下将动画用作附加组件而不用担心？

如果有人要小提琴：我尝试重新创建它。但这里还有一个有趣的事情：完全相同的代码在 jsfiddle 中的旧 Safari 中不会有任何影响。它也不会生气或消失。

编辑：

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

JS-小提琴：

这里是两个例子的工作小提琴。

4

1 回答 1

2

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

于 2012-06-07T15:38:21.120 回答