【发布时间】：2015-11-09 22:50:07
【问题描述】：
我有一个奇怪的错误，我似乎无法弄清楚：
我想结合两个 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;
}
}
【问题讨论】：
-
您使用的是哪个版本的 Safari？我使用的是第 9 版，它的动画效果似乎非常好。
-
您好，我使用的是 Safari v 8.0.6 (10600.6.3)
-
Safari 版本 9.1.1 (11601.6.17) - SVG 中的 SMIL 出现相同的损坏行为。
标签： css svg css-animations