带有剪切路径的动画：插入在Safari中不起作用

Posted 2021-04-11

我制作了一个在Chrome和Firefox上都能正常运行的剪辑路径动画，但Safari完全忽略了该动画。经过测试后，我发现我的静态剪切路径在Safari中可以正常工作，但拒绝为其设置动画。这是我的CSS：

.home .arc-line img {
    -webkit-animation-name: mobile-arc;
    -webkit-animation-duration: 5s;
    -webkit-animation-delay: 0s;
}

@-webkit-keyframes mobile-arc {
  0% { -webkit-clip-path: inset(0 100% 0 0); }
  80% { -webkit-clip-path: inset(0 100% 0 0); }
  100% { -webkit-clip-path: inset(0 0 0 0); }
}

位于以下网站的目标网页的移动版（屏幕宽度为400像素）上：www.satya-ame-art.com它是页面中心的白色弧线，应该从左到右进行动画处理，但在Safari上保持不变。

非常感谢！

答案

[好，没有找到解决此错误的方法，我发现的唯一解决方法是放弃动画的剪切路径想法，而将其替换为内联SVG，这要归功于"Animate Calligraphy with SVG"技术。]

这需要做更多的工作，但是即使不是更好，结果在视觉上也是相同的。