CSS不透明动画safari bug？

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

在最新的Safari（5.1.5）中，它工作得很好

但我无意中在一个较老的Safari（5.0.6）中看到了这个例子，什么也没看到。h1不见了

通过添加无旋转触发eather（不透明度和动画效果）：

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

它又起作用了

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

在第一个例子中，我是否做错了什么

在旧版本的Safari中是否存在已知的bug，我应该对其进行不同的处理

原因：

我不介意你在不支持的浏览器中看不到动画（这只是一个很好的附加组件），但是如果你不知道你的动画元素什么时候不再显示的话，它会很大胆

我怎样才能不用担心就可以将动画作为附加功能使用呢

如果有人要小提琴，我试着重新制作。但这里还有一件有趣的事情：完全相同的代码在JSFIDLE中的旧Safari中不会有任何效果。它也不会产生动画或消失

编辑：

我只是看到h1不再与原始代码不相似（我无法重建它），但没有任何动画效果。它只与所描述的触发器之一一起工作

JS-FIDDLE:

---

我手头没有旧版本的Safari，但我记得在旧版本中玩动画时遇到过这些类型的bug。我通过在选择器中添加“结束状态”来解决这些问题，例如，

p{opacity:1}

你能提供一个你试图使用它的html示例吗？我刚刚添加了一个小提琴，它现在正以我所指的方式工作。如果使用旧的Safari（5.0.6），正确的代码将无法工作。首先，谢谢你告诉我这是一种明显的错误。但是你的解决方案（我也试过）没有任何影响。仍然被度触发器卡住了。你认为这只会发生在狩猎中吗？或者至少只是为了不透明度？我不介意应用它来确保内容至少不会消失。有其他人知道bug吗？我接受这个答案，因为我反馈说这是一个已知bug。但到目前为止，我将继续使用degree触发器。此解决方案使转换元素中的

fixed

元素表现为绝对定位的元素。我还没有找到解决办法。

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

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

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