CSS3 动画 SVG 对象的多个属性在 Safari 中不起作用

Question

我正在尝试使用 CSS 和关键帧为 Safari 6 和 7 中的 SVG 元素设置动画:

@-webkit-keyframes animation {
    from {
        opacity: 0;
        -webkit-transform: translate(0, 150px);
    }

    to {
        opacity: 1;
        -webkit-transform: translate(0, 0);
    }
}

但只有不透明度有效，如果我删除不透明度，翻译就可以了。如何同时为两个属性设置动画？在 Chrome 中它工作正常。

这是一个 jsBin example

您可以并排看到它在 div 元素上工作，但不在 SVG 内的元素上工作。

Answer 1

答案当然是我必须使用“fill-opacity”而不是“opacity”，SVG 元素不支持它...呃!

这是固定的 jsBin example .