css过渡之让米兔走起来
一、过渡的作用
过渡(transition)
- 通过过渡可以指定一个属性发生变化时的切换方式
- 通过过渡可以创建一些非常好的效果,提升用户的体验
二、过渡的相关属性
transition-property: 指定要执行过渡的属性多个属性间使用,隔开如果所有属性都需要过渡,则使用all关键字大部分属性都支持过渡效果,注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡。
例:
transition-property: height , width;
transition-property: all;
transition-duration: 指定过渡效果的持续时间
时间单位:s 和 ms 1s = 1000ms
transition-duration: 100ms, 2s;
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-timing-function: cubic-bezier(.24,.95,.82,-0.88);
transition-timing-function: steps(2, start);
transition-delay: 过渡效果的延迟,等待一段时间后在执行过渡
transition-delay: 2s;
transition 可以同时设置过渡相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个是持续时间,第二个是延迟。
三、练习
代码示例
Document div{ height: 271px; width: 132px; margin: 0 auto; background-image: url("./images/bigtap-mitu-queue-big.png"); transition: background-position 1s steps(3); } div:hover{ background-position: -396px 0; }
实现效果