大部分属性都支持过渡效果,注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡（如属性的值为auto时则不能触发过度效果） 与动画不同的是过度需要指定的某个属性发生改变时才会触发(hover，visitor)，而动画可以主动触发 | 属性 | 描述 | CSS | | --- | --- | --- | | [transition](http://www.w3school.com.cn/cssref/pr_transition.asp "CSS3 transition 属性") | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 | | [transition-property](http://www.w3school.com.cn/cssref/pr_transition-property.asp "CSS3 transition-property 属性") | 规定应用过渡的 CSS 属性（如width、height）名称，多个用逗号隔开，全部过渡使用all。 | 3 | | [transition-duration](http://www.w3school.com.cn/cssref/pr_transition-duration.asp "CSS3 transition-duration 属性") | 定义过渡效果花费的时间。支持秒(s)和毫秒(ms)。1s=1000ms | 3 | | [transition-timing-function](http://www.w3school.com.cn/cssref/pr_transition-timing-function.asp "CSS3 transition-timing-function 属性") | 规定过渡效果的时间曲线。linear\|ease\|ease-in\|ease-out\|ease-in-out\|cubic-bezier(n,n,n,n); | 3 | | [transition-delay](http://www.w3school.com.cn/cssref/pr_transition-delay.asp "CSS3 transition-delay 属性") | 过渡效果的延迟，即规定过渡效果何时开始。可接受秒s和毫秒ms | 3 | ## **transition-timing-function** ease 默认值,慢速开始,先加速,再减速 linear匀速运动 ease-in加速运动 ease-out 诚速运动 ease-in-out先加速后减速 cubic-bezier(n,n,n,n);自定义https://cubic-bezier.com steps(n步,[end|start]) 分布执行过度效果 * end在时间结束时执行过渡 * start在时间开始时执行过度 ``` transition-property:all; transition-duration:10s; transition-timing-function:steps(2,end);//等同transition-timing-function:steps(2); 10s分两步执行过渡，每步5s,(2,end)的意思是5秒后执行，即先等5秒在执行过渡到一半再过5秒在过渡剩下的 (2,start)则是，第一秒就先执行过渡到一半，在等待5秒，执行下一半过渡，在等待5秒 ``` >[danger]一般我们都用transition简写，值没有先后顺序，只是两个时间都设置的话，第一个时间是过渡时间transition-duration input发光特效： ``` input[type=text]:focus,input[type=password]:focus,textarea:focus{ transition:border linear .2s,box-shadow linear .5s; -moz-transition:border linear .2s,-moz-box-shadow linear .5s; -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s; //outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用 outline:none;border-color:rgba(253,215,5,.75); //输入框边框颜色 //box-shadow 属性向框添加一个或多个阴影。 box-shadow:0 0 10px rgba(253,215,5,.105); //向外漫射程度1 -moz-box-shadow:0 0 10px rgba(253,215,5,.5);//向外漫射程度2 -webkit-box-shadow:0 0 10px rgba(253,215,5,3);//向外漫射程度3 } ``` ``` <style type="text/css"> .box1{ height: 271px; width: 132px; margin: 0 auto; background-image: url("./FastStoneEditor.bmp"); background-position:0 0; transition: 0.3s steps(3); } .box1:hover{ background-position:-396px 0; } </style> <div class="box1"></div> ```