CSS3 transition及transform属性的应用

一、CSS3 过渡属性transition

css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标划过、单击、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
过渡属性需要触发事件，如：hover（鼠标划过事件）

1. transition-property：检索或设置对象中的参与过渡的属性
   说明：属性值可以单独设置否个属性，也可以设置多个属性 width，height； 还可以设置为all（默认值）代表所有属性
2. transition-duration：检索或设置对象过渡的持续时间
   说明：设置过度时间（s, ms） 1s = 1000ms
3. transition-delay：检索或设置对象延迟过渡的时间
   说明：设置延迟过度时间（s, ms） 属性值为正值的时候是延迟执行过渡效果，为负值的时候是提前只想过渡效果；
4. transition-timing-function：检索或设置对象中过渡的动画类型
   说明：
   linear 匀速
   ease（默认值）逐渐慢下来
   ease-in加速
   ease-out减速
   ease-in-out先加速后减速
   贝塞尔曲线网址：http://cubic-bezier.com/
   复合式写法：transition:all 2s 1s
   linear ;
   transition: 2s linear 1s all ;
   说明：当使用复合式写法的时候，过度