SVG元素上与Safari兼容的CSS3动画

我有一个奇怪的错误，我似乎不明白：

我想结合两个CSS动画属性（不透明度和转换：翻译），我的目标是一个内联SVG元素

这个组合在Chrome中是完美的，在Firefox中是烦躁的，在Safari中不起作用

Safari似乎只能做一件或另一件事，而不能同时做两件事。不知道现在IE发生了什么，因为我在Mac电脑上

见示例：

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

SVG：

---

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

---

（Windows）

您使用的是哪个版本的Safari？我在版本9上，它的动画似乎非常好。大家好，我在Safari版本8.0.6（10600.6.3）Safari版本9.1.1（11601.6.17）-SVG中的SMIL上的行为相同。

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

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