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

Question

我试图在Safari 6＆amp ;;中为SVG元素设置动画。 7使用CSS和关键帧：

@-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元素上是不受支持的...... Duh！

这是固定的jsBin example。