offset属性中的path()函数可以轻松让任意的HTML元素沿着指定的路径运动，哪怕这个路径是歪歪扭扭，横七竖八的。
比方说：
.horse-run {
offset-path: path("M10,80 q100,120 120,20 q140,-50 160,0");
animation: move 3s linear infinite;
}
@keyframes move {
100% { offset-distance: 100%;}
}
就可以实现一个马儿沿着不规则路径不停跑的效果。您可以狠狠地点击这里：CSS offset-path实现的马儿不规则路径不停跑demo
效果示意见下 GIF 图：
是一个很棒的特性，对于动效的实现而言，可以说是个超级利器。
只可惜啊，只可惜，都快要2023年了，新冠疫情都要结束了，Safari他老人家居然还没有支持。
只能一声千年长叹了！
当然，也不是没有替代方案，可以使用 SVG SMIL animation 技术，参见我之前写的“超级强大的SVG SMIL animation动画详解 ”一文。
这个特性 Safari 支持老6了：
唉，明年抽个时间再看看吧，希望Safari争点气。
本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!