> 文档中心 > css过渡之让米兔走起来

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; }        

实现效果