css动画

css性能介绍

浏览器渲染步骤

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

渲染步骤的选取

1. 不走4（layout）
   在用js进行样式的修改时候，由于有一些情况并不会改变其整体文档流和盒模型的情况，浏览器为了节省性能会不走4
2. 全走
3. 不走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个常用的属性

1. translate

• translateX(length-percentage)

• translateY(length-percentage)

• translateZ(length)且父容器 perspective* translate3d(x,y,z)

• 代码例子 演示
  Tips：

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

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

Tips：

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

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

1. 一般用于 360 度旋转制作 loading，或者一些按钮的交互（鼠标移到按钮上就转一圈）

2. 用到时再搜索 rotate MDN 看文档

3. skew
   常用写法

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

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

transform 多重效果

组合使用

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

transition

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

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

不可transition的属性

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

animation

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

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

@keyframes

两种写法

1. from to

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

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

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

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