开启硬件加速
1、使用3D元素转换可以开启硬件加速
2、translate3D/translateZ，rotate3D/rotateZ，scale3D/scaleZ
3、开启硬件加速的思想就是欺骗浏览器，如rotateZ和rotate可以实现一样的旋转效果，但是rotateZ可以开启硬件加速，从而消耗机器性能，减少浏览器的性能消耗
4、硬件加速在移动端滥用会减少手机电池的使用寿命
景深
1、景深的origin会随着旋转而旋转，所以设置景深应给父级设置
2、景深值越大，图像显示越大
关键帧动画
1、使用@keyframes来定义
2、from后跟第一个百分值或者to
@keyframes move{
from{}
to{}
}
@keyframes move{
0%{}
100%{}
}
3、使用
- animation-name 定义的动画名称
- animation-duration 动画运行时间
- animation-linear 动画执行方式
- animation-delay 动画延迟时间
- animation-iteration-count 动画执行次数
- animation-direction:alternate 反向播放动画
合写时按照以上顺序
4、animation在js中不能在同一个作用域书写多个，用异步函数包裹，或放入其他的方法中，如计时器等
5、执行前以第一帧样式等待
animation-fill-mode:backwards
6、执行后，保持最后一帧的状态
animation-fill-mode:forwards
合并用animation-fill-mode:both
7、控制动画状态
animate-play-state:paused暂停动画
animate-play-state:running运行动画
