CSS3动画实战之多关键帧实现无限循环动效的时间间隔

最新推荐文章于 2025-06-23 16:27:41 发布

转载

最新推荐文章于 2025-06-23 16:27:41 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5abc2d25f265da237b222797

本文通过一个SVG+CSS3的loading图标制作过程，探讨如何解决非等粗交叉路径描边动画和多个动画无缝循环的问题。利用蒙版、关键帧动画（@keyframes）和animation属性，实现了复杂路径的描边动画，并确保了无限循环的平滑性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

题目有点绕，源起最近一个项目中所需的一枚loading图标。SVG+CSS3动画做了那么多，真正应用在项目中的机会少之又少，所以，抓住一切机会，即使loading也不能放过，用系统自带菊花有辱我这一年的修炼。在最后完美做成的过程中，解决了两个问题，第一，是非等粗交叉路径的描边动画实现，第二，是多个拼接动画的无限循环问题，后者困扰了许久，所以，当这个问题解决时，急于分享出来，便于其他的设计师小伙伴遇坑时一笑而过，也就是这篇文章的起因了。

1.如果只是简单的描边动画

是的，我是说如果只是如果。先看下要实现的动效。

左边是真身，很简单的一个企业的logo，因为是这种连笔式的，所以本能的反应适合描边动画，动态展示logo绘制过程。右边就是初步想法，绘制过程。看上去很简单，啊哈，来，透过现象看本质。如果这个图标是下面这种，对，就是我曾经的心头好，网易云音乐，因为随手用钢笔画的，没有用布尔运算，所以略显粗糙。这种来个描边动画，那简直是分分钟搞定的事情。

这种描边动效通过定义 stroke-dashoffset属性来实现（from 0; to length），非常简单，以前的文章中也写过戳这里戳这里，此处略过。好了，为什么说这种好实现呢，因为描边只要定义三个样式的属性值 stroke-linecap、 stroke-linejoin和 stroke-width就好。

好了，不说别人的logo描边动效多好实现了，来分析一下现在的案例，难度在哪里？非线性啊亲们。如果这个图标是下面这种的：

简单不简单，你就说简单不简单！当然，让甲方爸爸改图标是不现实，如果妥协做个神似形不似版的那还不如菊花了（转行做美工久了，没点强迫症还真是不行）。现在开始，找解决方法，突破，分析问题的能力还是有的。我想到的方法是万能的蒙版。蒙版是个好东西啊，能遮住所有你不想看到的，那直接给路径描边动画加个蒙版就好了呗。