css3動畫優點：開啓GPU加速，不會產生動畫隊列，即頻繁點擊按鈕時，不會有多個動畫在等待執行；
1. transition: property duration timing-function delay;
是個複合屬性，包括：
transition-property：設置過渡效果的 CSS 屬性，值：all 所有變化的屬性都過渡；某個css屬性或某些css屬性，用逗號隔開屬性
transition-duration：設置完成過渡效果需要的時間，值：數字，單位：秒或毫秒
transition-timing-function：設置速度效果的速度曲線
| 值 | 描述 |
|---|---|
| linear | 勻速開始至結束（等於 cubic-bezier(0,0,1,1)）。 |
| ease | 慢速開始，然後變快，然後慢速結束（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 慢速開始（等於 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 慢速結束（等於 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 慢速開始和結束（等於 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。 |
transition-delay：設置過渡效果延遲多久後開始，單位：秒或毫秒
理解：transition作用的屬性，當其屬性值發生變化，比如：hover時；js點擊後值的改變等等，凡是屬性值發生變化，均會觸發transition過渡屬性的過渡效果。
transition 動畫過渡可作用的屬性：
| background-color | background-position | border-bottom-color | border-bottom-width | border-left-color | border-left-width |
| border-right-color | border-right-width | border-spacing | border-top-color | border-top-width | bottom |
| clip | color | font-size | font-weight | height | left |
| letter-spacing | line-height | margin-bottom | margin-left | margin-right | margin-top |
| max-height | max-width | min-height | min-width | opacity | outline-color |
| outline-width | padding-bottom | padding-left | padding-right | padding-top | right |
| text-indent | text-shadow | vertical-align | visibility | width | word-spacing |
| z-index | 等等等 |
2. animation動畫鋪墊和@keyframes動畫關鍵幀
animation屬性：複合屬性。會按照@keyframes動畫關鍵幀裏面指定的幀狀態而過渡執行
| 屬性 | 屬性值 |
| animation-name | @keyframes的名字 |
|
animation-duration |
動畫過渡時間 |
| animation-timing-function | 動畫過渡函數 |
| animation-delay | 動畫過渡延遲時間 |
| animation-direction | 動畫過渡方向 |
| animation-iteration-count | 動畫過渡次數 infinite（無限次） | number（次數） |
|
animation-fill-mode
animation-play-state |
動畫開始前和結束後的操作
動畫播放狀態，running（播放） | paused（暫停） |
用法：
@keyframes + 關鍵幀名字 ：規定開始、中間過程、結束時的屬性狀態；
選擇器中調用animation屬性，animation屬性設置：某個關鍵幀名字 、過渡時間、過渡函數、運動次數、運動方向
（1）@keyframes + 關鍵幀 第一種寫法：from 和 to
<style>
.demo{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background: green;
animation: move 3s linear;
}
@keyframes move{
from{
background: red;
}
to{
background: blue;
}
}
</style>
背景顏色：動畫起始值：red；動畫終止值：blue；當整個animation結束後，背景顏色爲green；
如果不設置form，那麼動畫起始值爲green，動畫終止值：blue；當整個animation結束後，背景顏色爲green
注意：如果不設置背景顏色，那麼在動畫結束後，背景顏色爲空白。
（2）@keyframes + 關鍵幀 第二種寫法：百分比
注意：0% 和 100% 分別對應 form和to；百分比對應的是時間
比如：
<style>
.demo{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background: green;
animation: move 3s linear;
}
@keyframes move{
0%{
background: red;
}
50%{
background: yellow;
}
100%{
background: blue;
}
}
</style>
結果：背景顏色：動畫起始值：red，中途變向yellow，動畫終止值blue；動畫結束後，背景顏色：green；
注意：如果不設置背景顏色，動畫結束後的背景顏色爲空白；
動畫次數：n 播放次數、infinite無限次
動畫方向：normal默認值正常播放、reverse 反向播放、 alternate 動畫在奇數次（1 3 5...）正向播放，在偶數次反向播放、
alternate-reverse 動畫在偶數次（2 4 6...）正向播放，在奇數次反向播放。
<style>
.demo{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background: green;
animation: move 3s linear 10 reverse;
}
@keyframes move{
0%{
background: red;
}
50%{
background: yellow;
}
100%{
background: blue;
}
}
</style>
（3）播放和停止：
屬性：animation-play-state: running（播放） | paused（暫停）
動畫的播放和停止需要結合js來控制animation-play-state屬性，進而控制動畫的播放和暫停
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.demo{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background: green;
animation: move 3s linear 10 reverse;
}
@keyframes move{
0%{
background: red;
}
50%{
background: yellow;
}
100%{
background: blue;
}
}
</style>
</head>
<body>
<div class="demo"></div>
<button id="btn">播放/暫停</button>
<script>
var oDiv = document.getElementsByClassName('demo')[0];
var flag = true;
btn.onclick = function(){
if(flag){
flag = false;
oDiv.style.animationPlayState = 'paused';
}else {
flag = true;
oDiv.style.animationPlayState = 'running';
}
}
</script>
</body>
</html>
注意：播放或暫停，會使整個動畫過程暫停在某一時間點 或 在該時間點上繼續播放
（4）關鍵幀的起始位置和終止位置
animation-fill-mode：屬性定義動畫在開始之前和結束之後發生的操作，主要有四個值：
none：默認值，在動畫結束後，屬性值會回到原來設置的值，如果原來沒有設置該值，那麼該值爲空。
forwards：動畫結束後，屬性值會變成關鍵幀的最後一幀
backwards：在動畫關鍵幀的第一幀，延遲等待，再進行動畫過渡（運動）；正常情況下，物體在原始位置延遲等待後，再進行動畫過渡。
both：動畫過渡同時具有forwards和backwards效果
比如：animation: move 3s linear infinite reverse forwards running;