题目有点绕，源起最近一个项目中所需的一枚loading图标。SVG+CSS3动画做了那么多，真正应用在项目中的机会少之又少，所以，抓住一切机会，即使loading也不能放过，用系统自带菊花有辱我这一年的修炼。在最后完美做成的过程中，解决了两个问题，第一，是非等粗交叉路径的描边动画实现，第二，是多个拼接动画的无限循环问题，后者困扰了许久，所以，当这个问题解决时，急于分享出来，便于其他的设计师小伙伴遇坑时一笑而过，也就是这篇文章的起因了。
1.如果只是简单的描边动画
是的，我是说如果只是如果。先看下要实现的动效。
左边是真身，很简单的一个企业的logo，因为是这种连笔式的，所以本能的反应适合描边动画，动态展示logo绘制过程。右边就是初步想法，绘制过程。看上去很简单，啊哈，来，透过现象看本质。如果这个图标是下面这种，对，就是我曾经的心头好，网易云音乐，因为随手用钢笔画的，没有用布尔运算，所以略显粗糙。这种来个描边动画，那简直是分分钟搞定的事情。
这种描边动效通过定义stroke-dashoffset属性来实现（from 0; to length），非常简单，以前的文章中也写过
如果觉得《CSS3动画实战之多关键帧实现无限循环动效的时间间隔》对你有帮助，请点赞、收藏，并留下你的观点哦！
