转自： https://segmentfault.com/a/1190000006708777

总结解决CSS3动画卡顿方案

1.尽量使用transform做动画，避免使用height,width,margin,padding等；

原因是：
根据定义，CSS 的transform属性不会更改 元素或它周围的元素的布局 。transform属性会对 元素的整体 产生影响，它会对整个元素进行 缩放、旋转、移动 处理。

这对浏览器来说是个好消息 ！浏览器只需要一次 生成这个元素的位图 ，并在动画开始的时候将它提交给 GPU 去处理 。之后，浏览器不需要再做 任何布局、 绘制以及提交位图 的操作。从而，浏览器可以充分利用 GPU 的特长去快速地将位图绘制在不同的位置、执行旋转或缩放处理。

对于高度较慢的原因：
在动画的每一帧中，浏览器都要执行布局、 绘制、 以及将新的位图提交给 GPU 。我们知道，将位图加载到 GPU 的内存中是一个相对较慢的操作。

浏览器需要做大量工作的原因在于 每一帧中元素的内容 都在不断改变。改变一个元素的高度可能导致需要 同步改变它的子元素的大小 ，所以浏览器必须重新计算 布局 。布局完成后，主线程又必须重新生成该元素的位图。

2.要求较高时，可以开启浏览器开启 GPU硬件 加速。

比如：
一、现在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了 某些CSS规则 时就会开启，最显著的特征的元素的3D变换。

.cube {
   -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
二、可是在一些情况下，我们并不需要对元素应用3D变换的效果，那怎么办呢？这时候我们可以使用个小技巧“欺骗”浏览器来开启硬件加速。
 
虽然我们可能不想对元素应用3D变换，可我们一样可以开启3D引擎。例如我们可以用transform: translateZ(0); 来开启硬件加速 。
 
.cube {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   /* Other transform properties here */
在 Chrome and Safari中，当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果，下面的代码可以修复此情况：
 
.cube {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
                                    动画文字闪烁问题
1.动画加载后，浏览器没有发现任何合成因素，因此选择最佳策略：将页面的全面内容绘制再单个背景层上。
2.当执行transition动画的时候，我们明确了将合成添加到元素中-具有tranform属性过度的动画。但是由于隐私合成层的原因，位于动画元素之上的属性会全部提升为合成层。
3.提升到合成层总是会导致重新绘制：浏览器必须为该元素创建一个新的纹理并将其从上一层移除。
4.新增图层之后，必须将新的图层传送到CPU，已获得用户将再屏幕上看到的最终图像合成。这取决与层数，纹理大小和内容的复杂度，
                                    如果发现这些动画导致某些元素或者容器闪烁，抖动时，可以在使用动画属性的元素上（或发生抖动的元素上）添加如下声明：
.listname{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
但是有的时候一些完全不相关的元素也跟着抖动闪烁，可以在body元素上做如下声明：
body {
-webkit-transform: translate3d(0, 0, 0) ;
transform: translate3d(0, 0, 0
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
过渡动画（在没有启动硬件加速的情况下）会出现抖动的现象， 以上的 解决方案只是改变 视角 来启动硬件加速的一种方式；
启动硬件加速的 另外一种方式： 
.css {
        -webkit-transform: tra
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
                                    transform: scale();缩放在IE浏览器下会有抖动transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转如：transform: scale(1.2);换成：transform: scale(1.2) rotate(0.1deg);transform:translate();偏移会使图片或文字变得模糊transform偏移还会使图片或文字失帧，变得模糊，可以使用c...
                                    从解码渲染层面对比 PAG 与 lottie
最近由于业务需求，需要调研一下业界的知名动画渲染框架。经过一些时间的调研与探索，我将目光聚焦在两款不错的动画框架上。一款是知名的 lottie，一款是腾讯出品的 PAG。
lottie 相信大部分端上的研发都会或多或少的听过， lottie 是 airbnb 开源的一款业界知名的开源动画框架,通过 AE 制作动画之后，通过附带的插件 bodymovin 导出 动画的 json 文件，端上再通过 json 解析渲染。
lottie 不单单包含端上的渲染 SD
                                    1.PAG 是什么?在 web 中实现一个动画， css animation 声明一下各个时间点的样式就好了， 写起来并不麻烦。但是当设计给的动画越来越复杂, 还原度要求越来越高的情况下, 单纯依赖 css 写动画就显得捉襟见肘了。比如下面这些动画:对于这些动画，通常都有一套完整的动效解决方案。设计师在 AE 中设计好动画的表现形式，导出一个文件，开发在 web 或者其它端 (安卓/iOS 等) ...
                                    背景下学期就要做毕业设计了，上学期已跟毕设老湿确定好了题目。我选择做一个文艺类的阅读App，其实这是我狠早之前就想着要 
做的。上学期的时候刚接触Android开发没多久，曾试过动手做阅读类的App，后来做着做着感觉自己的能力还不够，就转去做了一个单机的工具类App。所以这个设想也就暂时搁置了。恰逢毕业设计来临，我就直接把这个当初的想法借着毕业设计实现了吧。我想趁着寒假期间就开始着手开发，到时开学后