CSS3过渡
1.transition-property
解释:检索或设置对象中参与过渡的属性
语法:transition-property:none / all / property;
none:没有属性改变
all:所有属性改变,默认值
property:具体的元素属性名称
2.transition-duration
解释:检索或设置对象过渡的持续时间
语法:transition-duration:time;
time:规定完成过渡效果需要花费的时间(以秒或毫秒计),默认值为0
3.transition-timing-function
解释:检索或设置对象中过渡的动画类型
语法:transition-timing-function:ease / linear / ease-in / ease-out / ease-in-out / step-start / step-end / steps(integer,[start / end]?) / cubic-bezier(number,number,number,number);
注:只能使用一个属性
参数说明:
linear:线性过渡,等同于贝塞尔曲线(0.0,0.0,1.0,1.0),匀速运动
ease:平滑过渡,等同于贝塞尔曲线(0.25,0.1,0.25,1.0)
ease-in:由慢到快,等同于贝塞尔曲线(0.42,0,1.0,1.0)
ease-out:由快到慢,等同于贝塞尔曲线(0,0,0.58,1.0)
ease-in-out :由慢到快再到慢,等同于贝塞尔曲线(0.42,0,0.58,1.0)
step-start:等同于steps(1,start)
step-end:等同于steps(1,end)
steps(integer,[start / end]?):接受两个参数的步进函数
第一个参数:必须为正整数,指定函数
第二个参数:取值可以是 start 或 end ,指定每一步的值发生变化的时间点,参数为可选,默认值为 end
4.transition-delay
解释:检索或设置对象延迟过渡的时间
语法:transition-delay:time;
time:指定秒或毫秒数之前要等待切换效果开始,默认值为0
综合写法
transition:property duration timing-function delay; 顺序不能换