Question

我制作了一个动画剪辑路径，该动画在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上保持不变。

非常感谢您！

Answer 1

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

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

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

1 个答案: