animation翻译为 动画
什么是过渡?
过度就是(transition)
通过过渡可以指定一个属性发生变化时的切换方式
通过过渡可以创建一些非常好的效果,提升用户的体验
transition-property:指定要执行过渡的属性
多个属性间使用,隔开
如果所有属性都需要过渡,则使用all关键字
大部分属性,都支持过渡效果,注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
transition-duration:指定过渡效果的持续时间
时间单位,S和ms 1s=1000ms
transition-timing-function:过渡的时序函数
指定过渡的执行方式
可选值ease默认值,慢速开始,先加速,再减速
linear匀速运动
ease-in加速运动
ease-out减去运动
ease-in-out先加速,后减速
cubiv-bezier()来指定时序函数
https://cubic-bezier.com
steps()分步执行过渡效果
可以设置第二个值
end在时间结束时执行过渡
start在时间开始时执行过渡
transition-delay:过渡效果的延迟,等待一段时间后再执行过渡
transition可以同时过渡相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个是持续时间,第二个是延迟