现目前，CSS动画十分的普遍，但什么是一个好的动画呢？动画的不同实现方式对浏览器又有什么影响？这是一个值得思考的问题
针对本人做过的一个Css动画与收集的相关资料，输出相关思考。
如何将动画性能最优,不影响页面流程。
尽量使用CSS3来书写动画。
- 对于chrome及其内核来说，渲染线程分为main thread和compositor thread。如果CSS动画只是改变
transform和opacity，这时整个CSS动画得以在compositor thread完成（而JS动画则会在main thread执行，然后触发compositor进行下一步操作） - 在JS执行一些昂贵的任务时，main thread繁忙，CSS动画由于使用了compositor thread可以保持流畅
使用CSS3书写动画的时间成本比使用JS书写动画的时间成本低，并且在后续修改中相对更改难度低，性能调优方向固定。 - CSS3有兼容性问题，而JS大多时候没有兼容性问题。
- CSS动画有天然事件支持（TransitionEnd、AnimationEnd，但是它们都需要针对浏览器加前缀），JS则需要自己写事件。
- CSS可以促发GPU加速，这样仅触发Composite，不触发
layout或paint,其中详见以前的分享的一个链接，浏览器渲染坑——无线性能优化Composite
对于不影响感官体验的部分，做到尽可能的图片压缩。如果为春季三月开学大促主会场banner的gif图：各动画效果如下
可以看出，此动画的难点一共有三，过山车、左下扭动的猫头鹰，以及在下方往返的购物车，不过随后设计放弃下方往返购物车，改为其他动效。针对以上动效，由于过山车与左下扭动的猫头鹰无法使用常规CSS实现而是用雪碧图实现。两张图尽可能压缩后由总共433KB降为77KB，一共减少了82%的体积。如图：
针对剩余元素，全部使用雪碧图进行拼合。但对于中间偷窥的粉色企鹅，如果将中间一大块扣出的话，无疑会增加图片体积，对于需要首屏快速加载的大促主会场来说，无疑是一个大负担。所以针对这里，采用改变粉色企鹅background-position的属性，达到gif动效的效果。主会场的sprite如图1-3(因原图略长，截取部分图像)：共计28.3KB。
综上，此次banner动画部分加上背景70KB一共需加载170KB左右素材，同时能展示出丰富的动效。
合理书写动画效果。
合理使用GPU加速
合理使用GPU加速告诉浏览器使用GPU对其渲染，减少CPU渲染压力，释放CPU资源对其他线程进行支持。如何触发GPU加速？
CSS中一些属性（如transition、CSS3 3D transforms、Canvas、WebGL、Video等）能用来触发GPU渲染，详见 无线性能优化：Composite合理触发Composite
如图，通过Chrome浏览器的开发者工具可以查看页面元素重绘区域、合成层等，如何使用详见– Chrome渲染分析之Rendering工具使用
打开Rendering中的Layer Borders，查看页面中的合成层，更加详细的情况可以在Timeline中查看（ 无线性能优化：Composite 文中对这一点也有讲诉，此处不再赘诉），查看其中影响性能的地方(例如内存占用、重绘等)，然后根据自己需要，对其进行相关优化（例如，主会场中banner牺牲了部分性能换取了更小的图片加载）。
虽然提升合成层会达到更好的性能，这看上去十分美好。但是，创建一个新的合成层并不是免费的，它得消耗额外的内存和管理资源。实际上，在内存资源有限的设备上，合成层带来的性能改善，可能远远赶不上过多合成层开销给页面性能带来的负面影响（试想一下，创建成百上千个合成层，导致内存不断的飙升）。而且因为每个渲染层的纹理都需要上传到 GPU 处理，因此我们还需要考虑 CPU 和 GPU 之间的带宽问题、以及有多大内存供 GPU 处理这些纹理的问题。
所以合理的创建合成层是十分有必要的，具体情况还需要看实际项目情况。动画做到自然
需要在一开始对于整体动画有一构想，对于细节部分动画有自己的把握，并且与设计师进行沟通交流，理解动画细节与需注意要点。在完成动画后在和设计师进行交流，修正动画差异点。
如何让图片做到体积最小
将动画中所涉及到的图片尽可能进行组合、拆分放入一张sprite图。
这样做可以有效的减少请求数量，并且同时能对于零碎化的素材能够很好的进行管理。如图，sprite的大小为182*665，充分利用空间，对各种元素拼合，做到体积最小。
如果条件允许，使用JPEG格式的sprite图。
JPEG作为一种压缩图片格式，相对于PNG的天然优势就是有着良好的压缩率，并且JPEG有着一个极其重要的特征——渐进传输（即先传输图像的轮廓，然后逐步传输数据，不断提高图像质量，让图像由朦胧到清晰显示）。在控制体积方面，有着天然优势。对于不影响主体感官的图片进行大程度压缩。
对于非主要展示小图片可以调大压缩幅度，这样就算压缩出来有瑕疵也不会被用户肉眼所注意且对整体效果无影响。
使用优良的图片压缩工具
在这里推荐tinypng这一在线网站，TinyPng使用智能的有损压缩算法，（与pngquant 算法基本类似）通过减少图片的颜色，从而在几乎不影响视觉的情况下，显著的减少图片的体积。相对其他压缩网站来说，基本可以做到很小。
以下是百度到的在线图片压缩网站与其对比：
可以看出，tinypng和图好快这两个网站可以将png压的非常狠，而对视觉影像效果较小，对于一些无需太过精细的图片可以使用一些优良的第三方压缩工具进行压缩。
如何做到动效还原
静态设计稿的还原
要做到动效的还原，首先需要做到将静态设计稿的还原。因为动画部分一般不会设计到文字变动效果，所以做到静态设计稿还原是一大必要。
动效的还原
- 针对一些较为复杂的动效，与设计师进行沟通，确定效果方案，索要动画数据。
- 针对设计师所给出的gif图，在与其沟通的基础上，做出初版动效。
- 根据设计师所给出的意见，对动画细节进行修改。