一 过渡的理解
过渡（transition）[træn'siʒən]
-通过过渡可以指定⼀个属性发⽣变化时的切换⽅式，平滑的过渡
-在某种条件下可以触发，例如hover、active、focus情况下
-⼀次性的效果，不能循环，只能做简单的动画
-只有两帧，设置动画初始值和结束值
-IE10开始兼容，移动端兼容良好
过渡的四个属性
| 序号 | 属性 | 语义 | 备注 |
| 1 |
transition-property
|
哪些属性要过渡
|
-none 没有属性获得过
渡效果
-all 所有属性都参与
过渡 默认值
-property ⾃定义应⽤
过渡效果，⼀个或多
个，⽤逗号隔开
注意：
1、所有数值类型的
属性，都可以参与过
渡，⽐如width、
height、left、top、
border-radius、
opacity等
2、从⼀个有效数值
向另⼀个有效数值进⾏
过渡
|
| 2 |
transition-duration
|
指定过渡效果的持续时
间 （必填）
|
时间的单位：s和ms
1s=1000ms
|
| 3 |
transition-timing-
function
|
过渡变化曲线（缓动效
果） （选填）
|
*ease [i:z] 默认值，
慢速开始，先加速，然
后再减速
*linear 匀速运动
ease-in 先慢后快
加速运动
ease-out 先快后慢
减速运动
ease-in-out 以慢速开
始和结束的过渡效果
*steps()分布执⾏过渡
效果
cubic-bezier(n,n,n,n)
⽴⽅⻉塞尔曲线 函数，
值是0-1之间的数值
|
| 4 |
transition-delay
|
过渡效果的延迟，等待
⼀段时间后执⾏过渡
（选填）
|
时间的单位：s和ms
1s=1000ms
|
| 5 |
transition
|
同时设置过渡相关的所
有属性 （选填）
|
只有⼀个要求，如果要
写延迟，
则两个时间中,第⼀
个写过渡时间，第⼆个
写延迟时间
|
本文含有隐藏内容，请 开通VIP 后查看