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)
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{ transition-property transition-duration transition-timing-function transition-delay}
1
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{ animation-name animation-duration animatino-timing-function animation-delay animation-iteration-count animation-direction animtion-play-state animation-fill-mode}
1
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規則）。