笔记：CSS3过渡

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; 顺序不能换