SVG动画在野生动物园中向后动画

Question

我在Illustrator中创建了一个路径，然后使用了一些CSS来为它设置动画。 svg动画在Chrome和Firefox中运行得很好，但是，出于野生动物园的一个奇怪的原因，它会向后动画！该网站是http://www.rw.limdez.eu，位于该网站的最顶部横幅。点击链接后即可看到它！您只能在桌面上看到此信息，因为对于移动设备，它会将您重定向到移动版本的页面！这是我使用的CSS：

.smallline
{
stroke-dasharray:692;
stroke-dashoffset:-692;
animation-delay: 1s!important;
animation: draw-smallline 8s 1 forwards;
}


@-webkit-keyframes draw-smallline
{
0%{
stroke-dashoffset: -692;
}
100%
{
stroke-dashoffset:0;
}
}

注1：我也尝试过没有@-webkit-，但我有完全相同的结果！

注2：我在堆栈溢出中看到了其他非常类似的问题，但没有一个被回答。至少在某种程度上解决了我的问题！谢谢。

Answer 1

通过将0％dashoffset从-692更改为692来解决此问题！如果我没有弄错，这是因为safari不能有效地处理负值！

Answer 2

在Safari中，否定效果很好。

代替：

stroke-dasharray:692;

你应该使用：

stroke-dasharray:692 692;