在关键帧动画中使用CSS转换属性的Safari bug

Question

我试图使用关键帧为SVG图形设置动画，但我的动画在Safari中无法正常工作。它在Chrome和Firefox中很不错，但Safari似乎并没有像我喜欢的那样呈现它。我在我的CSS属性上使用-webkit-供应商前缀，但这似乎没有帮助。我不知道是什么导致了这样的事情。

Here是我的代码的小提琴链接。

以下是问题所在：

以下是其中一个关键帧的片段：

@-webkit-keyframes dropOne {
    0%, 100% {
        opacity: 0;
    }
    0% {
        -webkit-transform: translate(6px, -6px);
    }
    25%, 50%, 75% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(0px, 0px);
    }
}