过渡使得我们可以在不使用Flash动画或者JavaScript的情况下，当元素从一种样式变换为另一种状态时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡为另一种状态的过程

当前经常与 :hover一起搭配使用

一、transition基本用法

transition:要过渡的属性 花费的时间 运动曲线 何时开始;

（1）属性：想要变化的CSS属性，宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。

（2）话费时间：单位是秒（必须写单位），比如0.5s。

（3）运动曲线：默认是ease（可以省略），linear匀速、ease逐渐慢下来、ease-in加速、ease-out减速、ease-in-out先加速再减速。

（4）单位是秒（必须写单位），可以设置延迟触发时间，默认是0s（可以省略）。

谁过渡给谁加，所以transition要写在相关的元素中，而不是元素:hover中，:hover设置过渡的变化值。

二、transition实现多种过渡效果

1、增加多个过渡效果，直接在transition后增加相应的过渡，用逗号隔开即可。

transition: width .5s , height .5s linear 1s;

2、如果想要所有的属性都实现过渡效果，可以使用all

transition: all .5s linear 1s;