CSS动画详解

1.动画的原理

人的视觉暂留而形成，一帧一帧其实都是类似静止的图片

定义：

由许多静止的画面 (帧)
以一定的速度 (如每秒30张) 连续播放时
肉眼因视觉残象产生错觉

概念：

帧：每个静止的画面
播放速度:每秒24帧(影视)或者每秒30帧（游戏)

2.浏览器渲染原理

步骤：

根据HTML构建HTML树 (DOM)
根据CSS构建 CSS树 (CSSOM)
将两棵树合并成一颗渲染树 (render tree)
Layout布局(文档流、盒模型、计算大小和位置)
Paint绘制(把边框颜色、文字颜色、阴影等画出来)
Compose 合成（根据层叠关系展示画面）

用js更新样式的一般方法

比如div.style.background = 'red'
比如div.style.display = 'none'
比如div.classList.add('red')
比如div.remove(直接删掉节点

以上方法的异同：

先看三种解析方式

(图片来自饥人谷)

第一种全部流程的
- div.remove() 会触发当前消失，其他元素relayout
第二种跳过 layout布局
- 改变背景颜色这种，直接repaint + composite
第三种，跳过layout和paint
- 改变transform，只需composite
- 注意必须全屏查看效果,在iframe里看有问题

3.CSS动画优化

参考文章： https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count

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

4.transform完整介绍

四个常用功能

位移 translate
- translateX(<length-percentage>)
- translateY(<length-percentage>)
- translate(<length-percentage> ,<length-percentage>? ) ?代表可以省略
- translateZ(<length>)且父容器 perspective（试点或景深）
- translate3d(x, y, z)
  - 绝对居中的完美答案
    - ```
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            // 父元素必须设置了定位
```
缩放 scale 用的较少因为容易模糊
- scaleX( <number>)
- scaleY( <number>)
- scale( <number> , <number>? )
旋转 rotate
- rotate( [ <angle> |<zero>])
- rotateZ([<angle> | <zero>])
- rotateX([<angle> | <zero>])
- rotateY([ <angle> | <zero>])
- rotate3D 太复杂，详细请查资料
倾斜 skew
- skewX([<angle>|<zero>])
- skewY([ <angle><zero>])
- skew( [ <angle><zero>],[<angle>|<zero>]?)
组合使用
- transform: scale(0.5) translate(-100%,-100%);
- transform: none;取消所有

经验：

一般都需要配合 transition 过渡
inline 元素不支持 transform ，需要先变成 block

5.transition过渡动画

作用：

补充中间帧

语法：

transition:属性名时长过渡方式延迟
transition: left 200ms linear
可以用逗号分隔两个不同属性
transition: left 200ms, top 400ms
可以用all 代表所有属性
transition: all 200ms
过渡方式有:linear ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps，具体含义要靠数学知识 https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function

注意：不是所有属性都能过渡

display: none => block没法过渡
一般改成visibility: hidden => visible
display和 visibility的区别自己搜一下
background颜色也可以过度

6.animation动画

@keyframes 动画名称{
 0%{       //起始和结束状态缺少时,会以元素默认的状态为起始和结束状态

 }
 ...中间可以定义无限关键帧    也可以写成  from   to 形式
 100%{

 }
}
关键帧不写属性即为默认值
动画要与相应的元素结合才能触发效果

animation-name:动画名称;
animation-duration:动画时长;
animation-timing-function:动画速度曲线;有如下几个
 1.ease
 2.ease-in
 3.ease-in-out
 4.ease-out
 5.steps()    步数，可以做动态图
 6.贝塞尔曲线
 7.linear 匀速
animation-delay:动画延迟时间   默认为零
 1.n(指定时间)s
animation-iteration-count: 动画播放次数 
 1.infinite无限播放次数
 2.n(指定次数)
animation-direction:规定动画是否在下一周期逆向播放   默认值normal:每次都正向播放   altermate:奇数次正向播,偶数次反向播 
 1.reverse:每次都反向 
 2.alternate-reverse:奇数次反向播,偶数次正向播
animation-fill-mode:起始位置 
 1.默认值backwards(回到最初状态)
 2.forwards:保留最后一帧
animation-play-state:动画的运行/暂停 
 1.默认running 
 2.paused:暂停
综合样式：
animation:动画名称   动画时间  动画的速度曲线  动画延迟   播放次数  方向   暂停开始   起始位置        //写在相应的元素上面</pre>