《CSS 动画》

浏览器渲染

css动画优化：

动画优化:

1.优化 JavaScript 执行

对于动画效果的实现，避免使用 setTimeout 或 setInterval，请使用 requestAnimationFrame。
将长时间运行的 JavaScript 从主线程移到 Web Worker。
使用微任务来执行对多个帧的 DOM 更改。
使用 Chrome DevTools 的 Timeline 和 JavaScript 分析器来评估 JavaScript 的影响
使用 setTimeout 或 setInterval 来执行动画之类的视觉变化，回调将在帧中的某个时点运行，可能刚好在末尾，而这可能经常会使我们丢失帧，导致卡顿。

2.缩小样式计算的范围并降低其复杂性

降低选择器的复杂性；使用以类为中心的方法，例如 BEM。
减少必须计算其样式的元素数量。

3.避免大型、复杂的布局和布局抖动

布局的作用范围一般为整个文档。
DOM 元素的数量将影响性能；应尽可能避免触发布局。
评估布局模型的性能；新版 Flexbox 一般比旧版 Flexbox 或基于浮动的布局模型更快。
避免强制同步布局和布局抖动；先读取样式值，然后进行样式更改。

4.简化绘制的复杂度、减小绘制区域

除 transform 或 opacity 属性之外，更改任何属性始终都会触发绘制。
绘制通常是像素管道中开销最大的部分；应尽可能避免绘制。
通过层的提升和动画的编排来减少绘制区域。
使用 Chrome DevTools 绘制分析器来评估绘制的复杂性和开销；应尽可能降低复杂性并减少开销。

5.坚持仅合成器的属性和管理层计数

坚持使用 transform 和 opacity 属性更改来实现动画。
使用 will-change 或 translateZ 提升移动的元素。
避免过度使用提升规则；各层都需要内存和管理开销。

6.使输入处理程序去除抖动

避免长时间运行输入处理程序；它们可能阻止滚动。
不要在输入处理程序中进行样式更改。
使处理程序去除抖动；存储事件值并在下一个 requestAnimationFrame 回调中处理样式更改。

2D 转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。
缩放：scale
移动：translate
旋转：rotate
倾斜：skew inline元素一般不支持transform，所以先将其转换为block 二维坐标系：2D转换是改变标签在二维平面上的位置和形状的一种技术。

2D 转换之移动 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
transform: translate(x,y);
定义 2D 转换，沿着 X 和 Y 轴移动元素
translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
translate类似定位，不会影响到其他元素的位置
对行内标签没有效果

2D 转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
transform:rotate(angle)
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点
/* 设置旋转中心点*/
transform-origin: x y;

转换之缩放scale

transform:scale(x,y);
缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。.
transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
transform:scale(2,2) ：宽和高都放大了2倍
transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5)：缩小
同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，其顺序会影转换的效果。（先旋转会改变坐标轴方向）

css3D动画

过渡：

过渡（transition） - 通过过渡可以指定一个属性发生变化时的切换方式 - 通过过渡可以创建一些非常好的效果，提升用户的体验
transition-property: 指定要执行过渡的属性多个属性间使用,隔开
transition-duration: 指定过渡效果的持续时间
transition-timing-function: 过渡的时序函数指定过渡的执行的方式
transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。

用keyframes 定义动画（类似定义类选择器）

@keyframes 动画名称 {
   0%{
        width:100px;
   }  
   100%{
        width:200px;
   }
}

元素使用动画

div {
       width: 200px;
       height: 200px;
       background-color: aqua;
       margin: 100px auto;
       /* 调用动画 */
       animation-name: 动画名称;
       /* 持续时间 */
       animation-duration: 持续时间;
    }

综合： animation：动画名称动画时间运动曲线何时开始播放次数是否反方向动画等待或者结束的状态; animation: myfirst 5s linear 2s infinite alternate; 盒子动画结束后，停在结束位置： animation-fill-mode ： forwards 想要动画走回来，而不是直接跳回来：animation-direction ： alternate 暂停动画：animation-play-state: puased;

例：

 div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            /* animation-duration: 2s; */
            /* 运动曲线 */
            /* animation-timing-function: ease; */
            /* 何时开始 */
            animation-delay: 1s;
            /* 重复次数  iteration 重复的 conut 次数  infinite  无限 */
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放 默认的是 normal  如果想要反方向 就写 alternate */
            /* animation-direction: alternate; */
            /* 动画结束后的状态 默认的是 backwards  回到起始状态 我们可以让他停留在结束状态 forwards */
            /* animation-fill-mode: forwards; */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
             animation: move 2s linear 0s 10 alternate ; 
            /* 前面2个属性 name  duration 一定要写 */
            /* animation: move 2s linear  alternate forwards; */
        }
          div:hover {
            /* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */
            animation-play-state: paused;
        }

3D 转换

三维坐标系

x轴：水平向右注意： x 右边是正值，左边是负值
y轴：垂直向下注意： y 下面是正值，上面是负值
z轴：垂直屏幕注意：往外面是正值，往里面是负值

3D移动 translate3d

transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离
translform:translateX(100px)：仅仅是在x轴上移动
translform:translateY(100px)：仅仅是在Y轴上移动
translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ只能跟px单位）
因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动，translform:translateZ(100px)：仅仅是在Z轴上移动。有了透视，就能看到translateZ 引起的变化了

透视 perspective

z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距设置当前网页的视距为1000px，人眼距离网页的距离即需要再其父元素上加入如下 perspective: 1000px;语句，也就是说

 body {
            /* 透视写到被观察元素的父盒子上面 */
            perspective: 200px;
        }

3D旋转 rotate3d

通过旋转可以使元素沿着x y 或 z旋转指定的角度 transform:rotateX(45deg)：沿着x轴正方向旋转 45度 transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转 deg为角度（了解即可）（
transform: rotate3d(1, 0, 0, 45deg); transform: rotate3d(0, 1, 0, 45deg); transform: rotate3d(1, 1, 0, 45deg); ）

3D呈现 transfrom-style

控制子元素是否开启三维立体环境。
给父亲添加影响的是子盒子。
Transform-style: preserve-3d; 子元素开启立体空间，默认的值是 flat 不开启
transform-style: preserve-3d;

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

私有前缀

-moz-：代表 firefox 浏览器私有属性
-ms-：代表 ie 浏览器私有属性
-webkit-：代表 safari、chrome 私有属性
-o-：代表 Opera 私有属性

提倡的写法

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;