1. transition
一定時間之內，一組css屬性變換到另一組屬性的動畫展示過程。
屬性：
transition-property：動畫展示哪些屬性，可以使用all關鍵字；
transition--duration：動畫過程有多久；
transition-timing-function:linear,ease,ease-in,ease-out,ease-in-out，貝塞爾曲線等：控制動畫速度變化；
transition-delay：動畫是否延遲執行；
一般來說，將transition屬性應用到最初的樣式里，而不是放在結束的樣式里，
即定義動畫開始之前的元素外觀的樣式。
只需要給元素設置一次transition，瀏覽器就會負責以動畫展示從一個樣式到另一個樣式，再返回最初樣式的變化過程。
1. 需要一個事件來觸發，比如hover，所以沒法在網頁加載時自動觸發。
2. 是一次性的，不能重復發生，除非一再觸發。
3. 只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。
4. 一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。
（引用阮一峰大神博客里的簡介）
為了突破這些限制，animation出現了。
2. animation
與transition不同的是，animation可以通過keyframes顯式控制當前幀的屬性值，
而transition只能隱式來進行（不能指定每幀的屬性值），所以相對而言animation的功能更加靈活。
屬性：
animation-name：keyframes中定義的動畫名稱；
animation-duration：動畫執行一次持續的時長；
animation-timing-function：動畫速率變化函數；
animation-delay：動畫延遲執行的時間；
animation-iteration-count：動畫執行的次數，可以是數字，或者關鍵字（infinate）;
animation-direction：alternate(奇數次超前運行，偶數次后退運行)。
animation-fill-mode：告訴瀏覽器將元素的格式保持為動畫結束時候的樣子。