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}
|
|
接下来详细看看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种,已经能让你用起来得心应手了!