css过渡和动画的区别：
animation属性类似于transition，他们都是随着时间改变元素的属性值，那么区别是什么？
其主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。
动画不需要事件触发，过渡需要。
过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个。
一、CSS过渡
CSS 过渡是个比较好玩、好看的属性，它是可以通过 CSS 伪类选择器来触发的。
| 属性 | 描述 | 属性值 |
|---|---|---|
| transition-property | 选定该元素要进行过渡的属性 | none、all、单独写上各个属性 |
| transition-duration | 指定过渡所需要的时间 | Number+S |
| transition-timing-function | 指定过渡的方式 | ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier() |
| transition-delay | 指定开始过渡的延迟时间 | Number+S |
| transition | 简写形式 | 顺序是属性、过渡时间、过渡方式、延迟时间 |
二、CSS动画
CSS 动画比 CSS 过渡更灵活、更强大，它不必通过触发演示，默认下是自动播放的，并且它用关键帧来实现动画，说白了就相当于为 CSS 过渡加上多个状态（过渡只有始、末两个状态），下面是 CSS 动画的属性一览：
| 属性 | 属性值 | 描述 |
|---|---|---|
| animation-name | @keyframes 规则的名称 | 选择该元素执行哪个关键帧动画 |
| animation-duration | Number+S | 指定过渡所需要的时间 |
| animation-timing-function | 与过渡一样 | 指定过渡的方式 |
| annimation-delay | Number+S | 指定开始过渡的延迟时间 |
| animation-iteration-count | 数字、infinite | 指定动画div class="t2"td> |
| animation-play-state | paused | 暂停动画 |
| animation-fill-mode | none、forwords、backforwords、both | 确定动画播放后元素的状态 |
| animation | 简写形式 | 顺序是 name、duration、function、循环次数、是否交替、delay、mode |
| @keyframes name | CSS 属性 | 定制一段动画，确定其在不同进度时的关键帧 |
