我有这个用文本绘制的SVG线动画,但它似乎不适用于Safari和Internet Explorer。是否有我遗失的东西?
http://codepen.io/anon/pen/VYgdZv
CSS
svg path {
fill: none;
stroke: #000;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1700;
stroke-dashoffset: 1700;
animation: dash 5s ease-out forwards;
-webkit-animation-name:dash;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:ease-out;
-webkit-animation-fill-mode:forwards;
-moz-animation: dash 5s ease-out forwards;
-o-animation: dash 5s ease-out forwards;
-ms-animation: dash 5s ease-out forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@-moz-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@-o-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@-ms-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
答案 0 :(得分:0)
CSS动画,过渡,转换(以及JS中的classList
或dataset
)无法在IE 11及更早版本中使用。转换/动画问题has just been fixed in the Edge engine(同样适用于classList
),但对于IE11及更早版本,唯一的解决方案是使用JS(SMIL动画也不会工作,加上Chrome可能会丢失SMIL同样 - 更新:SMIL即将推出,不要使用它!)。
这是一个如何做到这一点的例子:
var p = document.querySelector('.animate'),
offset = 1000;
var offsetMe = function() {
if(offset < 0) offset = 1000;
p.style.strokeDashoffset = offset;
offset--;
requestAnimationFrame(offsetMe);
}
offsetMe();
&#13;
@keyframes fadeInP {
to {
stroke-dashoffset: 0;
}
}
.animate {
stroke-dashoffset: 1000;
/*animation: fadeInP 10s linear infinite;*/
}
/*
CSS animations don't work for this in IE and neither do SMIL animations.
*/
&#13;
<svg viewBox="0 0 400 400">
<path stroke-width='8' class="animate" stroke-dasharray="10 10" fill='none' stroke="#000" d="M 0,0 C 100,10 200,80 300,15 " />
</svg>
&#13;
关于你的代码的一个快速说明:总是最后编写未加前缀的规则版本,你不需要-ms-animation
(IE10 +支持动画没有前缀,而IE9根本不支持它们。)