transition过渡
定义和用法
transition用于设置四个过渡属性:
1、transition-property : 规定设置过渡效果的CSS属性的名称。
all ( 默认值 ) , 指定 width , height;
2、transition-duration : 规定完成过渡效果需要多少秒或毫秒。
需要添加单位:s (秒) ms (毫秒) 1s == 1000ms
3、transition-delay : 定义过渡效果何时开始。
eg:
transition-delay : 2s : 延迟两秒进行过渡
transition-delay : -2s : 提前两秒进行过渡
4、transition-timing-function : 规定速度效果的速度曲线。
运动形式:加速、减速、匀速…
linear:匀速
ease(默认值):逐渐慢下来
ease-in:加速
ease-out:减速
ease-in-out:先加速后减速
cubic-bezier(贝塞尔曲线)
( http://cubic-bezier.com )这是贝塞尔曲线在线取值的网址:
这里我们可以通过拖动线条来实现自己想要的运动效果,
点击copy复制代码直接使用。
transition属性一般使用复合写法:
eg:
transition:all 2s linear;
transition:linear 2s all;
transition:2s linear all; (这几种写法是没有顺序的)
注意:当总时间与延迟时间同时存在的时候,就有顺序了,第一个是总时间,第二个是延迟时间。
eg:
transition:2s 3s linear all;
注意:不要把transition放到hover中,此时只有当鼠标移入才会有过渡效果,鼠标移出是没有过渡效果的。