CSS中的动画类型
- transition补间动画：有开头结尾两个状态，中间靠脑补（需要状态变化来带动）
- @keyframe+animation关键帧动画：相当于有很多个补间动画，多个状态之间靠脑补（不需要状态变化来带动）
- 逐帧动画：不需要靠脑补（属于animation关键帧动画的特殊用法）
transition补间动画
- CSS3 transition属性，需要状态变化来带动
- 位置-平移（left/right/margin/transform）
- 方位-旋转（transform）
- 大小-缩放（transform）
- 透明度（opacity）
- 其它-线性变换（transform）
- 例子
网页上调试动画
可自定义速度曲线
其中transition-timing-function属性规定的速度曲线可自定义，比如使用https://matthewlein.com/tools/ceaser
@keyframes+animation关键帧动画
- CSS3 @keyframes、CSS3 animation（动画） 属性相当于多个transition补间动画，与元素状态的变化无关，定义更加灵活。
- animation简写的属性和transition极其相似但比他多，第二开始依次是动画效果时长、速度效果的速度曲线、过渡效果何时开始等等。
逐帧动画
- 逐帧动画是使用animation关键帧动画实现的，只是去除了补间动画效果
- 适用于无法补间计算的动画（即两个状态之间无法计算的情况）
- 资源较大，影响性能，过长或者过大的动画不适合使用逐帧来实现
- 在动画速度曲线的属性中使用steps()去除补间动画效果
- steps()中的数字其实表示希望两个关键帧之间产生几个画面，所以设置steps(1)即表示只产生1个画面，也就是去除补间动画效果。
例子
相关面试题
考查的最多的是transition和animation+@keyframes的语法，怎么写
CSS动画的实现方式有几种
过渡动画和关键帧动画的区别
- 过渡动画需要有状态变化(即需要事件去触发动画效果)
- 关键帧动画不需要状态变化
- 关键帧动画能控制更精细
如何实现逐帧动画
- 使用关键帧动画（animation）实现
- 在控制 动画速度曲线的属性animation-timing-function 属性 中进行设置来去掉补间（steps）
CSS动画的性能（JS也可实现动画）
- CSS动画性能不坏
- 部分情况下优于JS（因为JS实现动画的库有很多，这之间性能相差也很大）
- 但JS可以做到比CSS更好（因为CSS提供的性能优化方式少）
- CSS动画要注意部分高危属性（box-shadow等），很消耗CPU性能
react中的动画
- react中也可使用transition/animation+@keyframes，更方便的有第三方库，可参考博客文章“使用react-transition-group实现动画”