前端学习笔记（11）之过渡属性（transition）详解

有四个transition属性可以影响过渡效果

• 指定要执行过渡的属性 transition-property:
• 过渡效果持续的时间 transition-duration：
• 过渡的时序函数 transition-timing-function
• 过渡效果的延迟 transition-delay
• 简写属性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

可以同时设置这四个值，并且没有严格的次序要求。
只有一个要求：
如果写两个时间 前边的默认是持续时间 后边的是默认时间。
如果写一个时间，这个时间指的是持续时间。