大部分屬性都支持過渡效果,注意過渡時必須是從一個有效數值向另外一個有效數值進行過渡（如屬性的值為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> ```