前言：在CSS3中，动画效果有俩种方式：
第一种：transition 属性只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。transition属性功能是相同的，都是通过改变元素的“属性值”来实现动画效果。
第二种：animation 属性通过定义多个关键帧以及定义每个关键帧（@keyframes）中元素的属性值来实现复杂的动画效果。
过渡
transition
设置元素当过渡效果，可以实现元素不同状态间的平滑过渡，经常用来制作动画效果。
语法：transition: < property > < duration > < timing-function > < delay > ;
参数：
| 值 | 描述 |
|---|---|
| transition-property | 过渡动画的属性，如果是all表示所有的都进行过渡动画。 |
| transition-duration | 动画间隔时间，以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。 |
| transition-timing-function | 加速曲线，实质上这个函数会建立一条加速度曲线，在整个动画变化过程中，变化速度改变 。默认：ease |
| transition-delay | 动画开始之前需要等待的时间。 |