transition
transition 属性是一个简写属性，用于设置四个过渡属性
transition-property, 设置过渡效果过属性名
transition-duration, 规定完成过度的时间
transition-timing-function,规定过渡效果的速度曲线
transition-delay 定义过渡效果过什么时候开始
transition 的初始值为：
transition-delay: 0s;
transition-duration: 0s;
transition-property: all;
transition-timing-function: ease;animation定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name，规定需要绑定到选择器的 keyframe 名称。。
- animation-duration，规定完成动画所花费的时间，以秒或毫秒计。
- animation-timing-function，规定动画的速度曲线。
- animation-delay，规定在动画开始之前的延迟。
- animation-iteration-count，规定动画应该播放的次数。
- animation-direction，规定是否轮流反向播放、
- 默认值：none 0 ease 0 1 normal，
- 在javascript中的用法object.style.animation="mymove 5s infinite"
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
语法
animation: name duration timing-function delay iteration-count direction;
| 规定是否应该轮流反向播放动画。 |
animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：
| 值 | 描述 | |
|---|---|---|
| linear | 动画从头到尾的速度是相同的。 | |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 | |
| ease-in | 动画以低速开始。 | |
| ease-out | 动画以低速结束。 | |
| ease-in-out | 动画以低速开始和结束。 | |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 | |
animation-iteration-count 属性定义动画的播放次数。
| 值 | 描述 | |
|---|---|---|
| n | 定义动画播放次数的数值。 | |
| infinite | 规定动画应该无限次播放。 | |
animation-direction 属性定义是否应该轮流反向播放动画。
如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
注释：如果把动画设置为只播放一次，则该属性没有效果。
| 值 | 描述 | |
|---|---|---|
| normal | 默认值。动画应该正常播放。 | |
| alternate | 动画应该轮流反向播放。 | |
| 规定是否应该轮流反向播放动画。 |