我遇到了一个奇怪的bug，一直无法解决：
我想要结合两个CSS动画属性（opacity和transform: translate），并将其应用在一个内联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;
}
}