一、过渡(transition)
过渡(transition)
当一个属性发生变化时的切换方式
通过过渡效果 可以创建非常好的效果 提升用户体验
transition-property
指定执行的过渡属性
transition-property:width,height;
多个属性间使用逗号隔开,如果所有属性都要过渡,则可以使用all
大部分属性都支持过渡,只要能计算的都能过渡
注意:过渡时必须是一个有效值向另一个有效值过渡
transition-duration
指定过渡效果持续时间
单位:s和ms 1s=1000ms
可以分别指定时间
transition-timing-function
过渡的时序函数
指定过渡执行的方式
可选值:
ease 默认值 慢速开始 先加速,再减速
liner 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速 后减速
cubic-bezier()来指定函数
https://cubic-bezier.com
steps()分步执行过渡