css动画

css性能介绍

浏览器渲染步骤

根据HTML构建HTML树（DOM），DOM，也就是文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
根据CSS构建CSS树（CSS DOM）
将两棵树合成一个渲染树（render tree）
布局（layout）
这里主要管文档流，盒模型，通过计算他们的大小和位置从而确定布局
绘制（paint）
画出边框颜色，文字颜色等等
合成（compose）
根据层叠关系展示画面

渲染步骤的选取

不走4（layout）
在用js进行样式的修改时候，由于有一些情况并不会改变其整体文档流和盒模型的情况，浏览器为了节省性能会不走4
全走
不走45

具体的情况可以在这个网站csstriggers里写的非常清楚，不知道是如何渲染就查一下。csstriggers

TIPs：
在js中一个个加样式进行修改比较麻烦，不如添加一个节点，比如我们命名为'red',通过div.classlist.add('red')进行样式的添加，这个'red'并不是红色，而是一个名字，节点里面可以添加多个样式，比较方便。

CSS动画的优化

可根据6个步骤进行分别优化，具体的都在这个文章里Google 写的文章

最为重要的优化是

JS 优化
使用 requestAnimationFrame 代替 setTimeout 或 setInterval
CSS 优化
使用 will-change 或 translate

CSS动画介绍

transform

主要有4个常用的属性

translate

translateX(length-percentage)
translateY(length-percentage)
translateZ(length)且父容器 perspective* translate3d(x,y,z)
代码例子演示
Tips：

如果z方向移动不设置视点位置，也就是perspective，不会有差别，因为视点就在表面正中心，你上下移动根据透视原理没有差别。
可以缩写translate(length-percentage,length-percentage)
可以用translate(-50%,-50%)让绝对定位元素的居中，
具体看案例
scale
常用写法

scaleX(number)
scaleY(number)
scale(number,number?)
代码例子演示

Tips：

用得较少，因为容易出现模糊和变形
rotate
主要的常用写法

rotate([angle|zero])
rotateZ([angle|zero])
rotateX([angle|zero])
rotateY([angle|zero])
rotate3d 太复杂，现在可以不学，一般用不到，除非你做 3d 开发，那时候才用得到
代码例子演示
Tips：

一般用于 360 度旋转制作 loading，或者一些按钮的交互（鼠标移到按钮上就转一圈）
用到时再搜索 rotate MDN 看文档
skew
常用写法

skewX([angle|zero])
skewY([angle|zero])
skew([angle|zero])
代码例子演示
Tips：

用得较少
用到时再搜 skew MDN 文档

transform 多重效果

组合使用

transform:scale(0.5) translate(-100%,-100%)
transform:scale(1.5) rotate(45deg)
transform:none;取消所有。不写代码也就是什么都没有，其实没必要写这个

transition

主要用来添加关键帧
transition:属性名时长过渡方式延迟
eg.transition：left 200ms linear 3s
Tips:

可以用逗号分隔两个不同属性
eg.transition:left 200ms,top 400ms
可以用 all 代表所有属性
eg. transition:all 200ms
时长单位只有 s 和 ms
过渡方式有：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier|step-start|step-end|steps
具体的在mdn里面查

不可transition的属性

display:none=>block不可过渡，一般改成 visibility:hidden=>visible（但是 visibility 永远是占位置的）
display:none（不显示对应的元素，在文档布局不分配空间）
visibility:hidden（不显示对应的元素，在文档布局保留空间）
简单来说就是display:none直接没了，visibility:hidden只是隐藏起来，该占的位置还要占据
background 颜色
opacity 透明度，但不推荐，一般是0-1/1-0
Tips：
如果一个属性过渡出了 bug 就改成其他能过渡的属性就好了
一般只有一次/二次动画效果
必须要有起始

animation

animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名；

时长：s 或者 ms
过渡方式：跟 transition 取值一样，如 linear
次数：3 或者 2.4 或者 infinite（无限次)
方向：reverse|alternate|alternate-reverse
填充模式：none|forwards|backwards|both，一般 forwards 用得多
是否暂停：paused|running
Tips：
以上所有属性都有对应的单独属性。如果只改一个就要单独写，就不能用 animation 了

@keyframes

两种写法

from to

@keyframes slidein{
  from{
    transform:translateX(0%);
  }
  to{
    transform:translateX(100%);
  }
}

百分数（这种写法更广泛）

@keyframes identifier{
  0%{top:0;left:0;}
  30%{top:50px;}
  68%,72%{left:50px;}
  100%{top:100px;left:100%;}
}

不懂的就去mdn查一下，写的很清楚。