过度属性Trransition
使用css的属性值在一段时间内平滑的过度
比如这个效果 字体滑动
四个要素和触发
过度属性,过度时间,过度函数,过度延迟的时间
触发主要通过用户触发,点击,悬浮等
过度属性
transition-property:none|all|property
多个属性用逗号隔开,
可设置过的属性有颜色,取值为数值的属性,转换属性,渐变属性,阴影属性
过度时间
transition-duration:s|ms /*默认值为0*/
过度函数
transition-timing-function:;
取值:
ease:默认值,规定慢速开始,然后变快,然后慢速结束
linear:匀速
ease-in:慢速开始,加速效果
ease-out:慢速结束,减速效果
ease-in-out:慢速开始和结束,先加速后减速
过度延迟
transition-delay:s|ms;
用户出发后,多长时间开始执行过度效果。
简写属性
语法:
transition:property duration timing-fubction dealy;
按顺序属性: 过度属性 过渡时间 过度函数 过度延迟执行