CSS動畫 animation與transition
一、容易混淆的概念
css中有幾個"長相"類似的動畫屬性。分別是
animation（動畫）、transition（過渡）、transform（變形）、translate（移動）
CSS3中的transform(變形)屬性用於內聯元素和塊級元素，可以旋轉、扭曲、縮放、移動元素，它的屬性值有以下五個：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix；
transform(變形)是CSS3中的元素的屬性，而translate（移動）只是transform的一個屬性值
animation（動畫）、transition（過渡）是css3中的兩種動畫屬性。animation強調流程與控制，對元素的一個或多個屬性的變化進行控制，可以有多個關鍵幀（animation 和@ keyframes結合使用）；
transition強調過渡，是元素的一個或多個屬性發生變化時產生的過渡效果，同一個元素通過兩個不同的途徑獲取樣式，而第二個途徑當某種改變發生（例如hover）時才能獲取樣式，這樣就會產生過渡動畫。可以認為它有兩個關鍵幀。當元素無任何操作直接就有動畫時，一般使用animation。當元素需要某些事件觸發才有動畫時，一般用transition。
transition示例：
<style> 2 #box1 { 3 height: 100px; 4 width: 100px; 5 background: green; 6 transition: background 2s ease,transform 2s ease-in 1s; 7 } 8 #box1:hover{transform:rotate(180deg) scale(.5,.5);background:red;} 9 </style> 10 11 <body> 12 <div id="box1">BOX1</div> 13 </body>
當滑鼠移動到box1上時，背景色由綠變紅，並且旋轉180度，縮小為0.5倍
二、transition
1.語法
transition是一個複合屬性，可設定四個過渡屬性，簡寫方式如下：
transition{ transition-property transition-duration transition-timing-function transition-delay}
transition-property：是用來指定當元素其中一個屬性改變時執行transition效果，值有none（沒有屬性改變）、all（預設值，所有屬性改變），indent（某個屬性名，一條transition規則，只能定義
一個屬性的變化，不能涉及多個屬性，如果要設定多個屬性時，需分別設定，中間以逗號隔開）【當其值為none時，transition馬上停止執行，當指定為all時，則元素產生任何屬性值變化時都將執行transition效
果】。
transition-duration ：過渡時間，是用來指定元素轉換過程的持續時間，單位為s（秒）或ms（毫秒）
transition-timing-function：時間函式，允許你根據時間的推進去改變屬性值的變換速率，值ease（逐漸變慢）、linear（勻速）、ease-in(加速) 、ease-out（減速）、ease-in-out：（加速然後減速）、cubic-bezier：（該值允許你去自定義一個時間曲線）
transition-delay：延遲，指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行transition效果，單位為s（秒）或ms（毫秒）
2.觸發方式
偽類觸發：:hover : focus :checked :active
js觸發：toggleClass
3、以下情況下，屬性值改變不能產生過渡效果
-
background-image，如url(a.jpg)到url(b.jpg)（與瀏覽器支援相關，有的瀏覽器不支援）等
-
float浮動元素
-
height或width使用auto值
-
display屬性在none和其他值（block、inline-block、inline）之間變換
-
position在stativ和absolute之間變換
三、animation
1.animation示例
<style>
2 .box{height:100px;width:100px;border:15px solid black;
3 animation: changebox 10s ease-in-out 3 alternate paused;
4 }
5
8 @keyframes changebox {
9 10% { background:red; }
10 50% { width:80px; }
11 70% { border:15px solid yellow; }
12 100% { width:180px; height:180px; }
13 }
14 </style>
15
16 <body>
17 <div class="box"></div>
18 </body>設定方法如上，其中0%和100%還可以使用關鍵詞from和to來代表，大括號中設定不同時間段的樣式規則。
如上示例中，animation中設定animation-duration的值是10s，並通過animation-name為changebox引入@keyframes changebox中的樣式，表示在10秒內執行動畫，動畫執行過程：
0-1秒背景色變紅，0-5秒寬度變為80px，0-7秒邊框由原始設定的無變為border:15px solid yellow，0-10秒高度變為180px，5-10秒寬度由80px變為180px
特別注意的是：每一個百分號後面的樣式變化都是從0s開始的，除非有兩個百分比設定了同一個樣式的變化（上方的例子，50% { width:80px; } 100%{width:150px;}，那麼寬度的整體情況會是0~5s中寬度由原始值變為80px；5~10s間，寬度由80px變為180px
2、animation語法
設定好了關鍵幀，就可以設定animation屬性了，animation也是一個符合屬性，可以簡寫，語法如下：
animation{ animation-name animation-duration animatino-timing-function animation-delay animation-iteration-count animation-direction animtion-play-state animation-fill-mode}
animation-name：用來呼叫@keyframes定義好的動畫，與@keyframes定義的動畫名稱一致
animation-duration ：指定元素播放動畫所持續的時間
animatino-timing-function ： 和transition中的transition-timing-function 中的值一樣。根據上面@keframes中分析的animation中可能存在多個小動畫，因此這裡的值設定是針對每一個小動畫所在時間範圍內的屬性變換速率。
animation-delay：定義在瀏覽器開始執行動畫之前等待的時間，這裡是指整個animation執行之前的等待時間，而不是上面說的多個小動畫
animation-iteration-count：定義動畫的播放次數，其通常為整數，預設是1,；取值為infinite，動畫將無限次的播放。
animation-direction：主要用來設定動畫播放方向，其主要有兩個值：normal 預設值，如果設定為normal時，動畫每次迴圈都是向前（即按順序）播放alternate（輪流），動畫播放在第偶數次向前播放，第奇數次向反方向播放（animation-iteration-count取值大於1時設定有效）
animtion-play-state：屬性是用來控制元素動畫的播放狀態。其主要有兩個值：running，可以通過該值將暫停的動畫重新播放，這裡的重新播放不是從元素動畫的開始播放，而是從暫停的那個位置開始播放。paused，暫停播放
animation-fill-mod： 預設情況下，動畫結束後，元素的樣式將回到起始狀態，animation-fill-mode屬性可以控制動畫結束後元素的樣式。主要具有四個屬性值：
none（預設，回到動畫沒開始時的狀態。）forwards（動畫結束後動畫停留在結束狀態）backwords（動畫回到第一幀的狀態）both（根據animation-direction輪流應用forwards和backwards規則）。