css3动画-transition

写法：

transition: <过渡属性名称[color]> <过渡时间[1s]> <过渡模式[inline]>, <过渡属性名称> <过渡时间> <过渡模式>, ...

或者

transition: <过渡属性名称> <过渡时间> <过渡模式>;

transition: <过渡属性名称> <过渡时间> <过渡模式>

...

或者可以单独分开书写：

<过渡属性名称> == transition-property:[color]

<过渡时间> == transition-duration:[1s]

<过渡模式> == transition-timing-function:[color]

 

 

过渡模式有5种

ease【缓慢开始，缓慢结束】（默认）

linear【匀速】

ease-in【缓慢开始】

ease-out【缓慢结束】

ease-in-out【缓慢开始，缓慢结束】（和ease稍有区别）

 

实际动画效果Demo