我在Illustrator中创建了一个路径，然后使用了一些CSS来为它设置动画。 svg动画在Chrome和Firefox中运行得很好，但是，出于奇怪的原因，在Safari中它会向后动画！该网站为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：我在堆栈溢出中看到了其他非常类似的问题，但没有一个被回答。至少在某种程度上解决了我的问题！谢谢。
答案 0 :(得分：0)
通过将0％dashoffset从-692更改为692来解决此问题！如果我没有记错，这是因为safari没有有效地处理负值！
答案 1 :(得分：0)
负片在Safari中工作正常。
代替：
stroke-dasharray:692;
您应该使用：
stroke-dasharray:692 692;