一.理解transition屬性
W3C標准中對CSS3的transition是這樣描述的：
CSS的transition允許CSS的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊，獲得焦點，被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。簡潔點說就是當元素從一種樣式變換為另一種樣式時為元素添加效果。
transition主要有***四個屬性***，那這四個屬性怎么記呢？變換的話總得有變換的屬性名吧，知道是要哪個屬性變，還得有變換的持續時間吧，持續時間里還得有變換速率吧，是先快后慢呢還是先慢后快呢；最后呢，一般動畫都會有個延遲選項吧；所以就是**屬性**，**時間**，**速率**，**延遲**
transition-property：/*規定設置過渡效果的 CSS 屬性的名稱。*/
transition-duration：/*規定完成過渡效果需要多少秒或毫秒。*/
transition-timing-function：/*規定速度效果的速度曲線。*/
transition-delay：/*定義過渡效果何時開始。*/
下面用幾個實例來展示transition的具體用法。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>畫一個過渡效果</title> </head> <style> .container { width: 100px;/* 設置為過渡前的寬度*/ height: 100px; background: red; transition: width 2s;/* 規定過渡元素為寬度，變化時長為2秒*/ transition-timing-function:linear;/*不設置該屬性時默認速度效果的速度曲線為慢->快->慢，這里我將其設為勻速變化*/ transition-delay: 1s;/* 規定在過渡效果開始之前需要等待的時間為1秒*/ } .container:hover { width: 300px;/* 設置為過渡后的寬度*/ } </style> <body> <div class="container"> </div> <p>把鼠標指針移動到紅色的 div 上，觀看過渡效果。</p> </body> </html>
效果如下：
我想，通過代碼都能大概了解transition的基礎用法了吧。
那么直接來分享一下手風琴的案例吧，由於比較簡單，都是通過注釋代碼來講解，就不敘述了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>transition的手風琴案例</title> <style> * { margin: 0;/*格式化*/ padding: 0; } .mulu { width: 250px; height: auto; margin: 30px auto;/*設置手風琴整體居於頁面居中*/ } .item h3{/*標題*/ width: 100%; height: auto; text-align: center;/*設置文本居中*/ background: #ff0000; border-bottom: 1px solid gray;/*設置下邊框3個屬性（1px，實線，灰色）*/ } .item .item-box{/*內容*/ width: 100%; height: 0;/*鼠標沒有懸停時，高度為0*/ overflow: hidden;/*鼠標沒有懸停時，隱藏內容，*/ transition: height 2s;/*設置高度的過渡變化為2秒*/ } .item .item-box ul{/*內容列表*/ list-style: none;/*去掉無序列表樣式，即是字體前的小圓點*/ background: #008795; padding: 10px;/*設置內邊距為10px*/ } .item:hover .item-box{/*鼠標懸停時變化*/ height: 100px;/*鼠標懸停時高度變化為100px*/ } ul li:active{/*鼠標點擊時變化*/ color: white;/*鼠標點擊時，字體變白*/ } </style> </head> <!--先用盒模型來規范一下，設置4個div，分別輸入不同的新聞欄目，以地址來命名，在不同的欄目中再設置列表，寫上詳細的新聞列表--> <body> <div class="mulu"> <div class="items"> <div class="item"><!--新聞欄目1--> <h3>遂溪縣</h3><!--地址標題--> <div class="item-box"> <ul> <li>遂溪的菜市場有個小書生。</li><!--新聞列表1--> <li>遂溪的菜市場有個小書生。</li><!--新聞列表2--> <li>遂溪的菜市場有個小書生。</li><!--新聞列表3--> <li>遂溪的菜市場有個小書生。</li><!--新聞列表4--> </ul> </div> </div> <div class="item"> <h3>湛江市</h3> <div class="item-box"> <ul> <li>湛江的菜市場有個小書生。</li> <li>湛江的菜市場有個小書生。</li> <li>湛江的菜市場有個小書生。</li> <li>湛江的菜市場有個小書生。</li> </ul> </div> </div> <div class="item"> <h3>廣東省</h3> <div class="item-box"> <ul> <li>廣東的菜市場有個小書生。</li> <li>廣東的菜市場有個小書生。</li> <li>廣東的菜市場有個小書生。</li> <li>廣東的菜市場有個小書生。</li> </ul> </div> </div> <div class="item"> <h3>大中國</h3> <div class="item-box"> <ul> <li>中國的菜市場有個小書生。</li> <li>中國的菜市場有個小書生。</li> <li>中國的菜市場有個小書生。</li> <li>中國的菜市場有個小書生。</li> </ul> </div> </div> </div> </div> </body> </html>
效果如下：
鼠標懸停后
