transition 过渡
IE10、Firefox、Chrome、Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
Chrome 25 以及更早版本需要前缀 -webkit-。
IE9 以及更早版本不支持 transition 属性。
过渡属性
【1】transition-property：
规定应用过渡效果的 CSS 属性的名称（当指定的CSS属性改变时，过渡效果开始），其默认值为 all 。
【2】transition-duration：
规定完成过渡效果需要的时间（单位为 s 或 ms），其默认值为 0s ，意味着如果不指定这个属性，将不会呈现过渡效果。
【3】transition-timing-function：
规定过渡效果的时间曲线。
默认 ease ：慢速开始，中间变快，慢速结束；相当于 cubic-bezier(0.25, 0.1, 0.25, 1)。
可选 liner：匀速运动；相当于 cubic-bezier(0, 0, 1, 1)。
可选 ease-in：慢速开始；相当于 cubic-bezier(0.42, 0, 1, 1)。
可选 ease-out：慢速结束；相当于 cubic-bezier(0, 0, 0.58, 1)
可选 ease-in-out：慢速开始，慢速结束；相当于 cubic-bezier(0.42, 0, 0.58, 1)
可选 cubic-bezier(n, n, n, n)：在 bezier 函数中自定义 0 ~ 1 之间的数值。
贝塞尔时间曲线详解。。。
【4】transition-delay：
规定过渡效果的延迟时间，默认为 0s 。
复合属性
在使用复合属性定义过渡效果时，子属性之间用空格分隔。
transition: width 2s linear;
transition 属性可以指定多个值，当指定多个值时，中间用逗号分隔。
transition: width 2s ease-in-out, height 2s ease-in-out;
过渡阶段
【1】过渡分为两个阶段：前进（forward）和反向（reverse）。
【2】若前进阶段还未完成就进入反向阶段，则反向阶段的初始值为前进阶段结束时的瞬时值。
【3】以 :hover 伪类为例，如果在非 hover 状态下设置了 transition 属性，相当于设置了反向状态，此时前进和反向是一致的。
#test { width: 100px; height: 100px; background-color: cyan; transition: width 2s, height 2s;}#test:hover { width: 300px; height: 300px;} 这段代码意味着，当鼠标悬浮时，将 width 变为 300px，将 height 变为300px，过渡时间为 2s；当鼠标离开时，将 width 变为 100px，将 height 变为 100px，过渡时间为 2s。
但是如果在 hover 状态下也设置了 transition 属性，则 hover 状态下的为前进状态，非 hover 状态下的为反向状态。
#test { width: 100px; height: 100px; background-color: cyan; transition: width 2s, height 2s;}#test:hover { width: 300px; height: 300px; transition: width 5s, height 5s;} 这段代码意味着，当鼠标悬浮时，将 width 变为 300px，将 height 变为300px，过渡时间为 5s；当鼠标离开时，将 width 变为 100px，将 height 变为 100px，过渡时间为 2s。
注意：在 hover 状态下设置 transition 属性时，明确哪些属性需要过渡，而哪些属性不需要过渡。
【4】当子元素和父元素过渡属性一致：若触发子元素过渡时，父元素正在过渡，则将父元素过渡的中间态的值作为子元素过渡的初始值；同理，若子元素过渡并未完成就开始父元素的过渡，则将子元素过渡的中间态的值作为父元素过渡的初始值。
#box:hover { font-size: 48px; transition: font-size 3s;}#test:hover { font-size: 48px; transition: font-size 10s;} 需要注意的是：当子元素与父元素过渡属性一致，但是过渡时间不一致的时候，如上面这段代码，子元素的过渡时间为 10 秒，父元素的过渡时间为 3 秒，当鼠标悬浮在子元素上时，呈现的是子元素的过渡效果，但是父元素的过渡时间也在开始计算；当子元素上过渡进行了 2 秒，此时将鼠标移入父元素，进行父元素的过渡时，这个属性的过渡时间就只有 1 秒。
【5】当需要过渡的属性初始值为 auto 时，不会进行过渡。
#test { width: 100px; height: 100px; margin: 30px auto; background-color: cyan;}#test:hover { transition: margin-left 5s; margin-left: 500px;}
【6】隐式过渡，是指一个属性的改变引起另一个属性的改变。
#box { width: 300px; height: 300px; border: 1em solid black;}#box:hover { font-size: 48px; transition: font-size 3s;} 当 font-size 改变时，border 的宽度也会跟着改变。
Firefox 和 IE 支持隐式过渡。
参考：