一、什么是过渡
过渡(transition)[træn'siʒən]
通过过渡可以指定⼀个属性发⽣变化时的切换⽅式,平滑的过渡
在某种条件下可以触发,例如hover、active、focus情况下
⼀次性的效果,不能循环,只能做简单的动画
只有两帧,设置动画初始值和结束值
IE10开始兼容,移动端兼容良好
二、过渡的属性
1、transition-property 哪个属性需要过渡
1、所有数值类型的属性,都可以参与过渡,⽐如width、 height、left、top、border-radius、 opacity等
2、从⼀个有效数值 向另⼀个有效数值进⾏ 过渡
也可以写:none(什么都不过渡),all(默认值,所有属性都需要过渡)
2、 transition-duration 指定过渡所需的时间(必须要填写)
填写xx s或者xx ms
3、transition-timing-funtion 过渡变化曲线
可选值:
ease 默认值,慢速开始先加速,然后再减速
linear 匀速运动 ease-in 先慢后快加速运动
ease-out 先快后慢减速运动
ease-in-out 以慢速开 始和结束的过渡效果
steps()分布执⾏过渡效果
cubic-bezier(n,n,n,n) ⽴⽅⻉塞尔曲线函数, 值是0-1之间的数值
4、transition-delay 过渡效果的延迟
填写xx s或者xx ms
三、所有属性的简写方式
transition:名称 延迟时间 过渡时间 速度曲线;