CSS3属性transition（过渡）详解

transform呈现的是一种变形结果，而transition呈现的是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。

transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property             指定要过渡的css属性
• transition-duration             指定完成过渡花费的时间
• transition-timing-function   指定速度效果的速度曲线
• transition-delay                 指定过渡效果何时开始

属性可以分开写,也可以放在一起写,放在一起写即

transiton:过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；

注：始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。transition可以和transform同时使用。

transition-timing-function 的五种取值：

linear           匀速

ease             默认，动画以低速开始，然后加快，在结束前变慢。

ease-in         缓慢开始（加速）

ease-out       缓慢结束（减速）

ease-in-out    缓慢开始，缓慢结束（先加速后减速）

触发过渡

单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击，悬浮等）触发，可触发的方式有： 
:hoever :focus :checked 媒体查询触发 JavaScript触发

局限性

（1）transition需要事件触发，所以没法在网页加载时自动发生。 
（2）transition是一次性的，不能重复发生，除非一再触发。 
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。 
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。 

CSS animation就是为了解决这些问题而提出的。

定义过渡效果何时开始。