CSS3过渡动画transition详解

CSS3过渡动画transition详解

transition是指过渡动画，让css属性的变化是可连续的、可控时间的、可控变化曲线的做出改变，无论是鼠标事件还是点击事件，只要设置的CSS属性发生改变，transition就能让元素在设置的时间内平滑的发生改变。

transition又包含了四个子属性，分别为property、duration、timing-function、delay。下面来一一介绍，在最后会给出一个简单的实例和使用方法说明。

transition-property变化的值，例如：{transition-property:opacity}，如果不用单独定义不同的变化时间或曲线，可以直接写为all。

transition-duration变化的时间。可以精确到小数点后一位，单位s（秒）。例如：{transition-duration:0.3s}。

transition-timing-function变化曲线，简单理解就是变化的快慢设置。下面有详解。

transition-delay设置变化的起始值，简单理解就是如果设置了transition-delay为0.1秒，变化会从0.1秒开始发生，默认为0。

transition合并的写法，例如{transition:opacity 0.5s ease 0s}，还可以一次写多个属性变化，例如{transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;}，为了方便，也可以写成{transition:all 0.5s ease}

1 2 3 4 5 6 7 8 9

.trans { -webkit-transition-property: background-color;指定过渡的性质 -webkit-transition-duration: 0.3s;指定这个过渡的持续时间 -webkit-transition-timing-function: ease;指定过渡类型 } .trans:hover { background-color: #486AAA; color: #fff; }

接下来详细看看transition-timing-function的值，ease,ease-on,ease-out,ease-in-out,还有自定义变化曲线的cubic-bezier(number,number,number,number)，cubic-bezier是指贝塞尔曲线，估计很多看到这个都很头疼，这里简单说明下。

ease

相当于 cubic-bezier(0.25, 0.1, 0.25, 1.0).简单说就是平均变化，速度一样。

ease-in

相当于 cubic-bezier(0.42, 0, 1.0, 1.0).先慢后快的变化，好像是猛踩油门然后换换刹车。

ease-out

相当于 cubic-bezier(0, 0, 0.58, 1.0).和ease-out相反，先快后慢的变化。

ease-in-out

相当于 cubic-bezier(0.42, 0, 0.58, 1.0).启动慢中间快收尾慢的变化，好像是老师傅开老爷车，要慢慢加速，慢慢刹车。

linear

相当于 cubic-bezier(0.0, 0.0, 1.0, 1.0).和ease-in-out相反，启动和收尾快，中间慢。

cubic-bezier

自定义一个 cubic-bezier 曲线. 根据需要定义 (x1, y1, x2, y2) 的数值. 所有数值要在 [0, 1] 范围内。如果不是要用transition完成一个很复杂的动画，基本上不会用到自定义的情况，搞清楚上面5种，已经能让你用起来得心应手了！