细说css3的动画（5）transition过渡动画
文章发布完两个例子后，继续更新文章
transition（过渡），原理和animation相似，但也有一些不同，我下面列举一下。
1、逆向动画：
animation 需要定义animation-direction:normal，但只能正向结束后再逆向
transition 只要一结束触发就会自动逆向执行动画，直到原始状态，任何状态下都可以
2、动画过渡点
animation 可以自定义多个动画过渡的点，通过@keyframes的a%{}
transition 只有一个起始点和终止点
3、触发方式
animation 自动触发，但一般通过定义animation-name来控制触发
transition 通过伪类来触发(:hover、:active、:focus等等)
所以说，如果transition用于按钮滑动菜单的动画会更方便些。
下面是从w3c中拷贝的属性
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
除了第一个，我依次介绍：
transition-property:哪个属性要执行过渡动画，可以一个，也可以多个属性
transition-duration:一轮动画总时间s或ms
transition-timing-function:补间动画规则（同animation的一样，只是没有step，因为过度不需要控制帧）
linear：匀速变化
ease：低速开始，然后加快，快结束的时候再放慢
ease-in：低速开始
ease-out：低速结束
ease-in-out：低速开始、低速结束
cubic-bezier(n,n,n,n)：n=0~1，自定义“三次贝赛尔曲线”速度变化方式
transition-delay:动画是否延时播放，延时多少s或ms
后三个和animation的一样，我单独介绍一下第一个。
transition-property:
all（默认值）
none（用于取消动画）
用法：单一属性动画：transition-property:width
用法：多个属性动画：transition-property:width,height,top
下面举个例子：
再分享几个css3按钮的动画库：
