有四个transition属性可以影响过渡效果
指定要执行过渡的属性 transition-property:
- 值width height,多个属性间使用逗号隔开。
- 如果所有属性都需要过渡,可以用all关键字。
- 大部分属性都支持过渡效果。
- 只要是值可以计算的,就可以过渡。
- 像素 角度 颜色 都是可以过渡的。
- 注意:过渡时,必须是从一个有效数值向另外一个有效数值进行过渡。
过渡效果持续的时间 transition-duration:
- 指定过渡效果持续的时间。
- 时间单位: s 和 ms 1s = 1000ms
- 如果多个要设置过渡的属性,也用逗号设置多个过渡时间100ms,2s;分别制定过渡时间。
过渡的时序函数 transition-timing-function
可选值:
ease 默认值,慢速开始,先加速,再减速
linear 匀速运动
ease-in 加速运动
ease-out减速运动 开始速度峰值,然后减速
ease-in-out 先加速后减速
cubic-bezier()贝塞尔曲线来指定时序函数http://cubic-bezier.com
steps(2 ,end/strat) 分步执行过渡效果。
第一个值是分几步执行。
第二值是决定在每一步的开始还是结束执行。
当position:duration是十秒,分两步执行每步是五秒的,end是在五秒结束的时候执行动作,start则是在5s的一开始就执行。
过渡效果的延迟 transition-delay
等待一段时间后再执行过渡。属性值是时间。
简写属性transition
可以同时设置这四个值,并且没有严格的次序要求。
只有一个要求:
如果写两个时间 前边的默认是持续时间 后边的是默认时间。
如果写一个时间,这个时间指的是持续时间。