一、CSS动画
概念
多个静止画面以一定的速度播放时，肉眼产生错觉，误以为是活动的画面。
二.浏览器渲染原理
步骤
- 构建HTML树（DOM）
- 构建CSS树（CSSDOM）
- 将以上两种树合并成一个渲染树（render tree）
- 布局（Layout）,文档流、盒模型、计算大小和位置
- 绘制（Paint）,把边框颜色、阴影等画出来
- 合成（Compose）,根据层叠关系展示画面
更新样式
JS更新样式：
- div.style.background ='red'
- div.style.display ='none'
- div.classList.add('red')
- div.remove()直接删掉节点
tips：实际开发过程中写样式
更新方式
- div.remove() 会触发当前小时，其他元素relayout
- 改变背景颜色 直接repaint+compasite
- 改变transform 只需compasite
动画优化
- JS优化： 使用 requestAnimationFrame代替 setTimeout 或 setlnterva
- CSS优化：使用 will-change 或 translate3
transform
- translate平移
- scale缩放（整体，包括边框宽度等所有尺寸参数）
- rotate 旋转
- skew 倾斜
三、transition用法
作用
补充中间帧
用法
- transition: 属性名 时长 过渡方式 延迟
- transition: left 200ms linear
- transition: left 200ms, top 400ms 可以用逗号分隔两个不同的属性
- transition: all 200ms 可以用 all 代表所有属性
- 过渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps
不能过渡情况
- display: none=> block无法过渡
- 一般改成visibility:hidden =>visible
- background 颜色可以过渡
- opacity 透明度可以过渡
tips过渡必须要有起始，比如：hover和非hover状态的过渡
四、animation 用法
@keyframes语法
- from to 语法
- 百分数语法
animation缩写语法
animation:时长|过渡方式|延迟|次数|方向|填充模式 |是否暂停|动画名
- 时长：1s或者1000ms
- 过渡方式：跟transition取值一样，如linear
- 次数：3或者2.4或者infinite
- 方向：reverse | alternate | alternate-reverse
- 填充模式：none | forwards | backwards | both
- 是否暂停：paused | running
以上所有属性都有对应的单独属性
