4 CSS3 transition、animation动画、2D转换、3D转换

- - - >>>动画效果设定：动画结束后都会回归原来的状态；

- - - >>>transition、animation、transform系列属性，底层实现利用的都是matrix矩阵(其是一种数据结构[以什么样的形式存储数据]) ->后期可深入学习哈~

1、transition过渡动画 -> 开发中一般都直接写 transition: all 2s linear 4s; ->聚焦点：起、始状态；并非所有属性都可进行动画过渡，例如display:none,display:block;就不可以；

transition过渡动画可参与过渡的属性 ->查看“css参考手册”中属性的动画性

transition中的过渡函数：linear/ease常用 ->也可以直接写cubic-bezier();贝塞尔曲线

2、 animation动画(关键帧动画)->其可以有中间状态； transform->起始、终止状态；      @keyframes xx{};//关键帧容器 ->必须设置在css样式中 ->同个动画可引入多个，以逗号相连即可；  animation: name time func delay direction count mode;//7个复合属性，animation-play-state属性的设置往往结合事件使用；-> animation属性的设定在很多场景中都是单独进行“属性设置”的；            

补充：animation-timing-function: steps(1,end);//默认值start；有三种写法：                          steps(1,end); 等同于 step-end;//end保留当前帧状态，直到这段动画时间结束；                                steps(1,start); 等同于 step-start;//start保留下一帧状态，直到这段动画时间结束；               

- - - >>其有很多应用场景："钟表"效果、“跑马”效果、"打印"效果

3、transform: rotatex();rotatey();rotatez();rotate3d(x,y,z,30deg);                                                              transform: scale(x,y);                                                                                                                            transform: skew(x,y);                                                                                                                            transform: translatex();translatey();translatez();translate3d(x,y,z);//以上x,y大小写皆可

transform-origin: center center;//设置变换中心，其中心点默认居于元素x轴和y轴的50%处 ->其也可以写空间值：transform-origin: 100px 100px 100px;

元素左顶点为坐标原点位置

4、3D转换：

景深聚焦点 -> 设置translateZ();否则景深设置多少都不会变化，其投影到屏幕上就那么大；

5、CSS3动画性能优化 -> 关键还是寻找“平衡点”

补充：

(1).日常开发中经常脚本化CSS：若涉及大量操作ele.style.xx;建议进行class样式整体操作，然后操作该class类名即可 ->减少重绘、重排的次数；

(2).GPU(图形处理器)加速 ->标准方法will-change;//高版本谷歌浏览器才支持

浏览器渲染/刷新页面的频率大约为16.7ms(1s渲染60次); GPU可在每一帧里渲染好页面，当改动页面的元素或者实现动画的时候，将会非常流畅；