最近工作之余，参考gif图片（点击我预览），用css3写了个demo来模拟这个gif图动画，最终效果点击我，请用chrome预览。
制作过程中，有几个小点觉得可以分享交流下：
1/动画关键帧时间点的获得，用于近似地模拟整个动画效果；
2/特殊元素的绘制；
时间点的获得
1.以上面gif图为例，将该gif图下载到本地，然后用photosh时间点op cs6打开，在图层窗口中可以看到动画组成的相关图层，如下图所示：
gif图在ps中的图层展示
每个图层代表一帧；
共205个图层（205帧）；
假设我们希望仿照这个gif来创建一个10s的动画，则各动画事物个体的animation-duration值为10s；
接下来逐个设置各事物个体的动画。
2.以从图层1（第一帧）开始，先出现的事物个体先解决。
观察发现，图层1到图层6中，出现一个红色矩形（第一个出现的事物个体），且这个过程都是顺时针旋转+变大，到了图层7，红色矩形开始逆时针旋转+变小；因此，图层6就成了关键帧（即原动作的结束，即将开始新动作）。按比例来算，（图层6/图层205）=0.0292682927，取2.92%，这个2.92%就是我们用animation时所需的时间点：
关键帧时间点的确立
接下来，红色矩形在图层6到图层12时进行逆时针旋转+变小，在图层13到图层15时静止，在图层16到图层24时则是顺时针旋转+变大，因此有
（图层12/图层205）约等于0.058536，取5.85%
（图层15/图层205）约等于0.07317，取7.3%
（图层24/图层205）约等于0.11707，取11.7%
同样的方法持续分析，最终算到图层205，可得红色矩形的每个动作时间点，
各时间点的确立
此时运行结果所得就是红色矩形在整个10s内的全部动画；
3.以计算完第一个红色矩形后，回到图层1，继续寻找下一个出现的事物个体（比如图层4开始出现一个白色矩形），然后分别计算各个体在10s内的所有时间点，最终所有事物个体的动画视觉上叠在在一起，就完成了这个作品的整体动画。
有现成的gif图做参考，用上述方法获取动作的时间点算是比较方便，但实际工作中往往很多时候并没有现成的gif图，如何获得各关键帧的时间点？
方法1：先制作gif图，通过gif图用上述方法模拟获得；
方法2：感性地边写边调，需要很多耐心，但完成后会很有成就感；
方法3：利用现成的css3动画制作软件，例如Sencha Animator ；
方法4：waiting for you.
特殊元素的绘制
动画制作往往会遇到特殊形状（有别于常规的点/线/圈/圆/多边形）的元素，除了用图片外，可尽量尝试使用css3来绘制，具体情况具体分析；
比如这个demo中出现的线圈小碎片。
demo中出现的线圈小碎片
这种纯色背景的动画里，在一个html标签的background-image属性里用线性渐变linear-gradient()和径向渐变radial-gradient() 这两个取值即可完成这个图案的绘制。
图案的绘制示例
b/c/d分别用线性渐变linear-gradient()画，a用径向渐变radial-gradient()来画，然后在background-image中叠加a/b/c/d这四个图案即可。
元素绘制的方法多种多样，视实际情况而定，一般借助伪对象/内外阴影box-shadow/多种背景图案的叠加background-image/ 线性渐变linear-gradient()/径向渐变radial-gradient()来绘制具体图案，用transform属性和border-radius（包括上下左右四个角的radius）来完成元素外形的变形。
结语
上例中的原gif图高达378KB，而用css3来模拟，则html+css文件只需20.2KB；各浏览器下可以尝试共用一套html和css，让支持css3的浏览器用css3来画这类动画，不支持css3的浏览器用一张gif图完成动画；
玩动画的乐趣在于可以让时间和空间相遇结合，这是件很美丽而优雅的事情，让事物在合适的时间出现在合适的位置做合适的事情，让自己很好地过了回导演瘾，
来源:迅雷CUED
-
广告合作
-
QQ群号：707632017
