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

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

非常感谢您!

climb166 回答:带有剪辑路径的动画:插入在Safari中不起作用

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

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

本文链接:https://www.f2er.com/3168965.html

大家都在问