1、translate:移動，transform的一個方法
通過 translate() 方法，元素從其目前位置移動，根據給定的 left（x 坐标） 和 top（y 坐标） 位置參數：
用法transform: translate(50px, 100px);
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);
2、transform:變形。改變
CSS3中主要包括 旋轉：rotate() 順時針旋轉給定的角度，允許負值 rotate(30deg)
扭曲：skew() 元素翻轉給定的角度,根據給定的水準線（X 軸）和垂直線（Y 軸）參數：skew(30deg,20deg)
縮放：scale() 放大或縮小，根據給定的寬度（X 軸）和高度（Y 軸）參數： scale(2,4)
移動：translate() 平移，傳進 x,y值，代表沿x軸和y軸平移的距離
所有的2D轉換方法組合在一起： matrix() 旋轉、縮放、移動以及傾斜元素
matrix(scale.x ,, , scale.y , translate.x, translate.y)
改變起點位置 transform-origin: bottom left;
綜合起來使用：transform: 30deg 1.5 30deg 20deg 100px 200px;
3、transition: 允許CSS屬性值在一定的時間區間内平滑的過渡，需要事件的觸發，例如單擊、擷取焦點、失去焦點等
transition:property duration timing-function delay;
property:CSS的屬性，例如：width height 為none時停止所有的運動，可以為transform
duration:持續時間
timing-function:ease等
delay:延遲
注意：當property為all的時候所有動畫
例如：transition:width 2s ease 0s;
·······································································手動分割線·····························
一、區分容易混淆的幾個屬性和值
先區分一下css中的幾個屬性：animation（動畫）、transition（過渡）、transform（變形）、translate（移動）。
CSS3中的transform(變形)屬性用于内聯元素和塊級元素，可以旋轉、扭曲、縮放、移動元素，它的屬性值有以下五個：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix；
transform(變形)是CSS3中的元素的屬性，而translate隻是transform的一個屬性值；transform是transition（過渡動畫）的transition-property的一個屬性值。
animation（動畫）、transition（過渡）是css3中的兩種動畫屬性。animation強調流程與控制，對元素的一個或多個屬性的變化進行控制，可以有多個關鍵幀（animation 和@ keyframes結合使用）；
transition強調過渡，是元素的一個或多個屬性發生變化時産生的過渡效果，同一個元素通過兩個不同的途徑擷取樣式，而第二個途徑當某種改變發生（例如hover）時才能擷取樣式，這樣就會産生過渡動
畫。可以認為它有兩個關鍵幀（Transition ＋ Transform ＝ 兩個關鍵幀的Animation）。
transition示例：
(1)#box1，産生雙邊過渡效果
#box1在hover後有兩個屬性改變了，改變前和改變後的屬性值分别是:
改變前：
background: green;
transform:rotate(0deg);//這個可視為預設狀态，即旋轉度為0
改變後：
background: red;
transform:rotate(180deg);
并且在#box1中設定了過渡動畫 transition: background 2s ease,transform 2s ease-in 1s; 可知在background和transform屬性變化時會産生動畫效果，而這種效果的産生有兩種途徑：
一種是從預設到hover觸發了過渡效果； 一種是從hover回到預設這兩種屬性也變化了，是以也産生了過渡效果。
注意點：這其中包括兩個方向上的，當滑鼠在div上懸停，div的樣式從原始樣式過渡到div：hover的樣式；當滑鼠離開div，樣式又從div：hover過渡到div預設樣式。這兩個方向上的過渡都是平滑不突兀的
1 <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>
（2）#box2 産生單邊過渡效果
什麼情況下隻會産生單邊過渡效果呢，看下面的例子，與#box1一樣，#box2也有相同的兩個屬性發生了改變：
改變前：
background: blue;
transform:rotate(0deg);//這個可視為預設狀态，即旋轉度為0
改變後：
background: red;
transform:rotate(180deg);
但是與#box1不同的是，#box2将過渡動畫 transition放在了 #box2:hover中進行設定。這樣情況下：隻有在滑鼠懸停時，才會觸發過渡動畫，過渡平滑；而滑鼠離開時，不會産生過渡動畫，background、transform将會生硬的回到最初的屬性值上。
注意點：這個例子中的過渡動畫是單一方向上的。當滑鼠在div上懸停，div的樣式從原始樣式過渡到div：hover的樣式；當滑鼠離開div，樣式會從div：hover的樣式回到原始樣式，但不是過渡動畫的方式，而是直接回到原始樣式，看上去比較突兀和生硬。
1 <style>
2 #box2{
3 height: 100px;
4 width: 100px;
5 background: blue;
6 }
7 #box2:hover{
8 transform: rotate(180deg) scale(.5, .5);
9 background: red;
10 transition: background 2s ease, transform 2s ease-in 1s;}
11 </style>
12 </head>
13 <body>
14 <div id="box1">BOX1</div>
15 <div id="box2">BOX2</div>
16 </body>
二、transition
1、文法
transition是一個複合屬性，可設定四個過渡屬性，簡寫方式如下：
transition-property：是用來指定當元素其中一個屬性改變時執行transition效果，值有none（沒有屬性改變）、all（預設值，所有屬性改變），indent（某個屬性名，一條transition規則，隻能定義
一個屬性的變化，不能涉及多個屬性，如果要設定多個屬性時，需分别設定，中間以逗号隔開）【當其值為none時，transition馬上停止執行，當指定為all時，則元素産生任何屬性值變化時都将執行transition效
果】。 連結： css中的能夠産生動畫的屬性清單（transition動畫和animation動畫适用）
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在relative和absolute之間變換
4、transition屬性浏覽器相容情況
三、animation
animation屬性結合@ keyframes使用， animation中的animation-name需要設定成@ keyframes的name一緻。
animation示例
1 <style>
2 .box{height:100px;width:100px;border:15px solid black;
3 animation: changebox 10s ease-in-out 3 alternate paused;
4 }
5 .box:hover{
6 animation-play-state: running;
7 }
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>
1、@keyframes關鍵幀
1 @keyframes changebox {
2 10% { background:red; }
3 50% { width:80px; }
4 70% { border:15px solid yellow; }
5 100% { width:180px; height:180px; }
6 }
設定方法如上，其中0%和100%還可以使用關鍵詞from和to來代表，大括号中設定不同時間段的樣式規則。
如上示例中，animation中設定animation-duration的值是10s，并通過animation-name為changebox引入@keyframes changebox中的樣式，表示在10秒内執行動畫，動畫執行過程個人了解如下：
| 序号 | 執行時間（共10s）animation-duration：10s | 執行動畫 | 對應@keyframes changebox中的規則 |
|---|---|---|---|
| 1 | 0~1s | 背景色由預設變為紅色 | 10%{ background:red; } |
| 2 | 0~5s | 寬度由原始設定的100px變為80px(并不是1~5s之間執行） | 50% { width:80px; } |
| 3 | 0~7s | 邊框由原始設定的無變為border:15px solid yellow; | 70% { border:15px solid yellow; } |
| 4 | 5~10s | 寬度由在5s時的80px變為180px | 100%{ width:180px;height:180px; } |
| 5 | 0~10s | 高度原始設定的100px變為180px | 100%{ width:180px;height:180px; } |
特别注意的是：每一個百分号後面的樣式變化都是從0s開始的，除非有兩個百分比設定了同一個樣式的變化（上方的例子，50% { width:80px; } 100%{width:150px;}，那麼寬度的整體情況會是0~5s中寬
度由原始值變為80px；5~10s間，寬度由80px變為180px；），個人了解，在這個過程中，不是一個動畫，而是多個小動畫（自己起的名字，友善後面區分animation）按照設定好的百分比對應的時間正好執行完成結
同一時間内有可能有多個小動畫同時在執行，也有可能隻有一個小動畫在執行。
2、animation文法
設定好了關鍵幀，就可以設定animation屬性了，animation也是一個符合屬性，可以簡寫，文法如下：
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，暫停播放
注意：使用animtion-play-state屬性，當元素動畫結束後，元素的樣式将回到最原始設定狀态（這也是為什麼要引入animation-fill-mode屬性的原因）
animation-fill-mod： 預設情況下，動畫結束後，元素的樣式将回到起始狀态，animation-fill-mode屬性可以控制動畫結束後元素的樣式。主要具有四個屬性值：
none（預設，回到動畫沒開始時的狀态。）
forwards（動畫結束後動畫停留在結束狀态）
backwords（動畫回到第一幀的狀态）
both（根據animation-direction輪流應用forwards和backwards規則）。
3、animation屬性浏覽器相容情況