本文主要内容
- 过渡：transition
- 2D 转换 transform
- 3D 转换 transform
- 动画：animation
transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
- 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
- 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
transition 包括以下属性：
- transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
- transition-duration: 1s; 过渡的持续时间。
- transition-timing-function: linear; 运动曲线。属性值可以是：
- linear 线性
- ease 减速
- ease-in 加速
- ease-out 减速
- ease-in-out 先加速后减速
- transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。
上面的四个属性也可以写成综合属性：
transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间; transition: all 3s linear 0s;
其中，transition-property这个属性是尤其需要注意的，不同的属性值有不同的现象。我们来示范一下。
如果设置 transition-property: width，意思是只让盒子的宽度在变化时进行过渡。效果如下：
如果设置 transition-property: all，意思是让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡。效果如下
