transition 属性定义元素属性的改变方式。他由几个子属性构成:
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

注意：

1：transition生效，要求元素的state(状态)必须发生变化

2：常见的方式是利用:hover,:active,:focus等伪类来触发transition

3：也可以通过切换元素的class来触发

通过不同的duration，控制属性变化的快慢

通过不同的 transition-timing-function，控制属性变化的速率、方式,常见有以下几种:
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,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) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

更多的cubic参数，可以在这个网站获取: http://cubic-bezier.com/

规定过渡效果何时开始
transition-delay 值以秒或毫秒计。

单个 transition 简写:
transition: (property) (duration) (timing func) (delay)
多个 transition 简写:
transition: (transition 1...),(transition 2...)