CSS3過渡，不再為JS動畫而犯愁
HTML5學堂：在頁面開發中經常會藉助JS來書寫大量的特效，以獲得較好的頁面感官效果。但是真正到了使用JS來操作的時候，往往會因為思維邏輯不清晰而顯得很凌亂。同時為了避免JS對頁面的效能產生影響，我們今天就來嘗試下不借助任何JS，轉而使用CSS3過渡來書寫出更好的動畫效果。
本文主要內容
一、Transition是什麼
二、Transition的語法
三、Transition的屬性值
四、Transition的使用
五、總結
一、Transition是什麼
W3C標準中對CSS3的transition是這樣描述的：“CSS3的transition允許CSS的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠單擊、獲得焦點、被點選或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。”
在實際的開發中，經常會遇到手機上的JS動畫卡頓現象，所以需要借用其他辦法來替代使用，而CSS3的過渡就可以很好的解決這個問題，一起來看吧~~~
二、Transition的語法
下面同樣從其語法和屬性值開始一步一步來學習transition的具體使用。
- transition ： <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>;
transition主要包含四個屬性值：
1、執行變換的屬性：transition-property
2、變換延續的時間：transition-duration；
3、在延續時間段，變換的速率變化：transition-timing-function；
4、變換的延遲時間：transition-delay。
下面繼續來看看這四個屬性值的具體使用吧~
三、Transition的屬性值
1、transition-property
語法：transition-property: none | all | indent;
transition-property是用來指定當元素其中一個屬性改變時執行transition效果，其主要有以下幾個值：
- none(沒有屬性改變)；
- all（所有屬性改變）這個也是其預設值；
- indent（元素屬性名）。
當其值為none時，transition馬上停止執行；當指定為all時，則元素產生任何屬性值變化時都將執行transition效果；ident是可以指定元素的某一個CSS屬性值。
常規的元素寬高、顏色等CSS屬性變化都可以觸發transition效果。但是需要提醒一點，並不是什麼屬性改變都為觸發transition動作效果，比如頁面的自適應寬度，當瀏覽器改變寬度時，並不會觸發transition的效果。
2、transition-duration
語法：transition-duration: time;
transition-duration是用來指定元素轉換過程的持續時間。
取值：time為數值，單位為s(秒)或者ms(毫秒)。其預設值是0，也就是變換時是即時的。
可以作用於所有元素，包括:before和:after等偽元素。
3、transition-timing-function
語法：transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out;
transition-timing-function的值允許根據時間的推進去改變屬性值的變換速率，有如下幾個可能的取值：
- ease：逐漸變慢（預設值）；
- linear：勻速；
- ease-in：加速；
- ease-out：減速；
- ease-in-out：加速然後減速。
4、transition-delay
語法：transition-delay: time;
transition-delay是用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後等待多少時間後才開始執行transition效果。
取值：time為數值，單位為s(秒)或者ms(毫秒)。預設大小是0，也就是變換立即執行，沒有延遲。
其使用和transition-duration極其相似，可以作用於所有元素，包括:before和:after等偽元素。
5、書寫方式
有時不只改變一個CSS效果的屬性，而是想改變兩個或者多個CSS屬性的transition效果，那麼只要把幾個transition的宣告串在一起，用逗號（“,”）隔開，然後各自可以有各自不同的延續時間和其時間的速率變換方式。
但需要值得注意的一點：transition-delay與transition-duration的值都是時間，所以要區分它們在連寫中的位置，一般瀏覽器會根據先後順序決定，第一個可以解析為時間的值為transition-duration，第二個為transition-delay。具體書寫方式如下：
- transition: background 5s ease 2s,
- width 3s ease-in 2s;
如果想給所有元素的屬性執行transition效果，那麼還可以利用all屬性值來操作，此時它們共享同樣的延續時間以及速率變換方式，如：
- transition: all 5s ease 0.3s;
綜合上述，可以給transition一個速記法：transition: "property" "duration" "animation type" "delay"；如下圖所示：
四、Transition的使用
通過上面，大家對CSS3的Transition屬性已經有了一定的概念，下面為了加強在這方面的使用，一起來看下面的DEMO。通過實踐來鞏固前面的理論知識，也通過實踐來加強transition的記憶。
下面的案例主要是在一個div中放置了幾個小塊，分別是對應了transition-timing-function中的幾種型別，然後在div的hover狀態下，改變其部分屬性，從而達到一種動畫效果。
首先把相應的結構程式碼搞定~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS3的過渡</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style type="text/css">
</style>
</head>
<body>
<!-- 案例的結構 -->
<div class="wrap clearfix">
<div class="timings-demo">
<div class="demo-box ease">HTML5學堂-碼匠</div>
<div class="demo-box ease-in">HTML5學堂-碼匠</div>
<div class="demo-box ease-out">HTML5學堂-碼匠</div>
<div class="demo-box ease-in-out">HTML5學堂-碼匠</div>
<div class="demo-box linear">HTML5學堂-碼匠</div>
</div>
</div>
</body>
</html>接下來，給對應的模組加上相應的CSS樣式，從而實現完整的一個過渡效果，如下：
.timings-demo {
width: 460px;
height: 400px;
margin: 50px auto;
padding: 10px;
border: 1px solid #ccc;
}
.demo-box {
width: 150px;
height: 50px;
margin-bottom: 30px;
background: #96c;
color: #fff;
text-align: center;
line-height: 50px;
border-radius: 15px;
box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);
}
/*ease效果：*/
.ease {
background: #f36;
transition: all 5s ease 0.3s;
}
/*ease-in效果：*/
.ease-in {
background: #369;
transition: all 3s ease-in 0.5s;
}
/*ease-out效果：*/
.ease-out {
background: #636;
transition: all 5s ease-out 0s;
}
/*ease-in-out效果：*/
.ease-in-out {
background: #3e6;
transition: all 2s ease-in-out 2s;
}
/*linear效果：*/
.linear {
background: #999;
transition: all 6s linear 0s;
}
/*hover狀態下demo-box產生屬性變化*/
.timings-demo:hover .demo-box {
height: 30px;
margin: 20px 0 40px 280px;
border: 1px solid rgba(255,230,255,08);
background: #39f;
line-height: 30px;
transform: rotate(360deg) scale(1.2);
border-radius: 25px;
}最後，其效果圖如下：
五、總結
那麼今天關於CSS3的Transition就簡單的介紹到這裡，需要掌握的就是CSS3中Transition的屬性值，上文提到的 "property" "duration" "animation type" "delay"。
最後提醒一句，因為Transition是CSS3的屬性，所以在書寫的時候需要加上相應的核心字首。