Web前端学习笔记——过渡

过渡（transition）：
1、通过过渡可以指定一个属性发生变化时的切换方式。
2、通过过渡可以创建一些非常好的效果，提升用户的体验。
3、过渡的属性值：
①transition-property：指定要执行过渡的属性，大部分属性都支持过渡效果（如宽度、高度、颜色等可以计算数值的属性），注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡，多个属性间使用逗号隔开，如果所有属性都要过渡，则使用all关键字。
如：transition-property：all；
②transition-duration：指定过渡效果的持续时间，时间单位s和ms，1s=1000ms。
如：transition-duration：2s；
③transition-timing-function：过渡的时序函数，指定过渡的执行方式。
可选值：
ease：默认值，慢速开始，先加速，再减速。
linear：匀速运动。
ease-in：加速运动。
ease-out：减速运动。
ease-in-out：先加速，后减速。
cubic-bezier（）：指定时序函数。——https://cubic-bezier.com
steps：分步执行过渡效果，可以设置第一个，第二个值：
end：在时间结束时执行过渡（默认值）
start：在时间开始时执行过渡
④transition-delay：过渡效果的延迟，等待一段时间后再执行过渡。
4、transition可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟。