CSS3过渡

Transition

1.允许css的属性值在一定的时间区间内平滑地过渡
2.在鼠标单击、获取焦点、被点击活对元素做任何改变时触发,并圆滑地以动画效果改变css的属性
存在兼容性问题:IE10+ 、FireFox16+、Chrome26+、Safari6.1+、Opera12.1+


属性

1.transition-property
检索活设置对象中参与过渡的属性 参数取值 none(没有属性改变) | all(所有属性改变)默认值 | property(元素属性名)
2.transition-duration
检索或设置对象过渡的持续时间 参数取整 time 举例 transition-duration:2s 单位是秒或者毫秒计
3.transition-timing-function
检索或者设置对象中过渡的动画类型
参数说明:
linear:线性过渡
ease:平滑过渡
ease-in:由慢到快
ease-out:由快到慢
ease-in-out:由慢到快再到慢
step-start 等同于steps(1,start)
step-end 等同于 steps(1,end)
steps([,[start|end]]) 第一个参数指定函数的步数,第二个参数指定每一步的值变化的时间点,默认为end
4.transition-delay
检索或设置对象延迟过渡的时间
参数:time
指定秒或毫秒之前要等待切换效果开始
默认为0
5.复合使用
transition:property duration time-function delay;

原文地址:https://www.cnblogs.com/wangxuxu7912/p/11375834.html