Safari兼容SVG元素上的CSS3动画

Question

我有一个奇怪的错误,我似乎无法弄清楚:

我想组合两个CSS动画属性(不透明度和变换:翻译),我的目标是内联SVG元素.

该组合在Chrome中非常完美,在Firefox中非常烦人,并且在Safari中不起作用.

Safari似乎只能做一个或另一个,而不是同时做两个.当我在Mac上时,不知道现在IE中发生了什么.

参见示例:http://jsfiddle.net/712xwmss/

如果有人能帮助它在所有4个浏览器中顺利运行,我们将不胜感激.

SVG:

<svg width="28" height="65" viewBox="0 0 28 65" xmlns="http://www.w3.org/2000/svg" class="center-block svgscroll">
<title>Example</title>
<g fill="none" fill-rule="evenodd">
    <path d="M5 44.7l7 6.953 7-6.953" class="svgarrow sa1" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M3 50.66l9 8.94 9-8.94" class="svgarrow sa2" stroke="blue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</g>

CSS:

    .svgarrow {
  -moz-animation: drop 1s infinite;
  -webkit-animation: drop 1s infinite;
  animation: drop 1s infinite;
}
.svgarrow.sa1 {
  -moz-animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.svgarrow.sa2 {
  -moz-animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

@-moz-keyframes drop {
  0% {
    -moz-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 0;
  }
  100% {
    -moz-transform: translateY(4px);
    transform: translateY(4px);
    opacity: 1;
  }
}
@-webkit-keyframes drop {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    opacity: 1;
  }
}
@keyframes drop {
  0% {
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 0;
  }
  100% {
    -moz-transform: translateY(4px);
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    opacity: 1;
  }
}

Answer 1

您应该更新 Safari，它已在最新版本上修复。

适用于 Mac 的最新 Safari 版本

Safari 5.1.7（Windows）