Transform：變形
在網頁設計中，CSS被習慣性的理解為擅長表現靜態樣式，動態的元素必須借助於javascript才可以實現，而CSS3的出現改變了這一思維方式。CSS3除了增加革命性的創新功能外，還提供了對動畫的支持，可以用來實現旋轉、縮放、平移、扭曲和過渡效果等等，這些功能再一次證明了CSS3功能的強大和無限潛能。
CSS3實現元素變形的基礎來源於新增的transform屬性，該屬性可用於實現元素的旋轉、縮放、平移、扭曲等效果。目前webkit內核支持-webkit-transform私有屬性，Mozilla Geckos內核支持-moz-transform私有屬性，IE瀏覽器支持-ms-transform私有屬性。
在部分的test case當中，每每演示transform屬性的，看起來好像都是帶動畫。這使得小部分直覺化思維的人（包括我）認為transform屬性是動畫屬性。而恰恰相反，transform屬性是靜態屬性，一旦寫到style里面，將會直接顯示作用，無任何變化過程。transform的主要用途是用來做元素的特殊變形，對於做設計的人來說並不是很陌生，簡單的來說就是css 的圖形變形工具。
關於圖形變形的基礎條件當中的原點設定，在css里面使用的是transform-origin來定義的。
關於圖形變化的模式，css3標准當中transform-style來定義。默認是flat，展現出來的是簡單的效果。而preserve-3d則將空間呈現為3d模式。
如果需要使用3d模式，必須先指定style為3d，並在任意父元素上增加 perspective及 perspective-origin 來指定透視點。
總體看來 css transform的屬性和原來使用的left ，right ，top， bottom 的屬性從動靜角度來說沒有任何區別，因此使用的時候應該將transform歸類到這類定位變形的靜態屬性里面。
用法分析：
Transform字面上就是變形、改變的意思。在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和平移translate。
語法：
transform ： none | transform-function [ transform-function ]*
也就是：transform: rotate | scale | skew | translate;
none:表示不進么變換；transform-function表示一個或多個變換函數，以空格分開；換句話說就是我們可以同時對一個元素進行transform的多種屬性操作，例如rotate、scale、translate三種。但這里需要提醒大家，以往我們疊加效果都是用逗號（“，”）隔開，但transform中使用多個屬性時只需要用空格隔開。
主要是以下幾個點：1、旋轉rotate；2、平移translate；3) 縮放scale；4) 扭曲skew；5)transform-origin(x, y)
這里就只說skew和transform-origin：
skew(angle [, angle]) ：設置X軸與Y軸上的斜切變換。skew是用來對元素進行扭曲變形，第一個參數是水平方向扭曲角度（即垂直的高度不變，水平方向變），第二個參數是垂直方向扭曲角度，其中第二個參數是可選參數，如果沒有設置第二個參數，那么Y軸為0deg。同樣是以元素中心為基點，我們也可以通過transform-origin來改變元素的基點位置。具體展示請查看。
還有改變元素基點的transform-origin：它的主要作用就是在進行transform動作之前可以改變元素的基點位置，因為元素默認基點就是其中心位置，換句話說沒有使用transform-origin改變元素基點位置的情況下，transform進行的rotate、translate、scale、skew等操作都是以元素自己的中心位置進行變化的。
但有時候我們需要在不同的位置對元素進行這些操作，那么就可以使用transform-origin來對元素進行基點位置改變，使元素基點不在中心位置，以達到需要的基點位置，下面我們主要來看看其使用規則。
transform-origin(x, y)：用來設置元素的運動的基點（參照點），默認點是元素的中心點。其中x和y的值可以是百分值、em、px，其中x也可以是字符參數值left、center、right；y和x一樣除了百分值外還可以設置字符參數值top、center、bottom，這樣的設置有點像background-position的寫法一樣。
Transition：過度
在頁面開發中經常會借助JS來書寫大量的特效，以獲得較好的頁面感官效果。但是真正到了使用JS來操作的時候，往往會因為思維邏輯不清晰而顯得很凌亂。同時為了避免JS對頁面的性能產生影響，我們今天就來嘗試下不借助任何JS，轉而使用CSS3過渡來書寫出更好的動畫效果。
W3C標准中對CSS3的transition是這樣描述的：“CSS3的transition允許CSS的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。”
在實際的開發中，經常會遇到手機上的JS動畫卡頓現象，所以需要借用其他辦法來替代使用，而CSS3的過渡就可以很好的解決這個問題
transition屬性是一個簡單的動畫屬性，非常簡單非常容易用。可以說它是animation的簡化版本，是給普通做簡單網頁特效用的。比如你有如下兩個樣式：
<style> div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style>
同時，如果在transition的動畫當中，屬性值有了新的變化，則會中斷當前的動畫執行，並將中斷時的屬性值提供給新的動畫作為起始值來計算新的動畫效果。
Transition的語法
下面同樣從其語法和屬性值開始一步一步來學習transition的具體使用。
transition ： <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>;
transition主要包含四個屬性值：
1、執行變換的屬性：transition-property；
2、變換延續的時間：transition-duration；
3、在延續時間段，變換的速率變化：transition-timing-function；
4、變換的延遲時間：transition-delay。
有時不只改變一個CSS效果的屬性，而是想改變兩個或者多個CSS屬性的transition效果，那么只要把幾個transition的聲明串在一起，用逗號（“,”）隔開，然后各自可以有各自不同的延續時間和其時間的速率變換方式。
但需要值得注意的一點：transition-delay與transition-duration的值都是時間，所以要區分它們在連寫中的位置，一般瀏覽器會根據先后順序決定，第一個可以解析為時間的值為transition-duration，第二個為transition-delay。
Animation：動畫
單從Animation字面上的意思，就知道是“動畫”的意思。但CSS3中的Animation只應用在頁面上已存在的DOM元素上，而且跟Flash和JavaScript以及jQuery制作出來的動畫效果又不一樣，因為使用CSS3的Animation制作動畫可以省去復雜的js、jQuery代碼。
當然CSS3也有一點不足，我們運用Animation能創建自己想要的一些動畫效果，但是有時會有卡頓現象。所以如果想要制作比較好的動畫，建議大家還是使用CSS3與js相結合的書寫方式。
做過Flash動畫的人都會知道，Flash里面有兩個基礎武器：時間軸和關鍵幀。前面在使用transition制作一個簡單的transition效果時，包括了初始屬性和最終屬性，一個開始執行動作時間和一個延續動作時間以及動作的變換速率。其實這些值都只是一個中間值，如果我們要控制的更細一些，比如說要第一個時間段執行什么動作，第二個時間段執行什么動作。這樣再用Transition就很難實現了，所以此時也需要這樣的一個“關鍵幀”來控制。
在官方的Introduction上介紹這個屬性是transition屬性的擴展。但是這個簡單的介紹里面包含了不簡單的東西：keyframes。
Keyframes具有其自己的語法規則，它的命名是由"@keyframes"開頭，后面緊接着是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。
對於一個"@keyframes"中的樣式規則是由多個百分比構成的，如“0%”到"100%"之間，可以在這個規則中創建多個百分比，分別在每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，比如說移動、改變元素顏色、位置、大小、形狀等。
不過有一點需要注意的是，可以使用“from”和“to”來代表一個動畫是從哪開始，到哪結束。也就是說這個 "from"就相當於"0%"，而"to"相當於"100%"。值得一說的是，關鍵幀中的數值段必須是百分數，如果不是百分數，這個keyframes是無效的，不會起任何作用。因為keyframes的單位只接受百分比值。
看一個簡單的 keyframes 的示例：
<style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } </style>
上面這個代碼展示了一個keyframes 'wobble'，其中 0％ 代表在變化中不同時間點的屬性值，你可以較精確的控制動畫變化中任何一個時間點的屬性效果。而animation則根據這個keyframes提供的屬性變化方式去計算元素動畫當中的屬性。與 transition 不同的是，keyframes提供更多的控制，尤其是時間軸的控制，這點讓css animation更加強大，使得flash的部分動畫效果可以由css直接控制完成，而這一切，僅僅只需要幾行代碼，也因此誕生了大量（比起flash來說算是大量了）基於css的animation tools，用來取代flash的動畫部分。
另外在animation屬性里面還有一個最重要的就是：animation-fill-mode，這個屬性標示是以(from/0%)指定的樣式 還是以(to/100%)指定的樣式為動畫完成之后的樣式。這個很方便我們控制動畫的結尾樣式，保證動畫的整體連貫。
CSS3的Animation類似於Transition屬性，都是隨着時間改變元素的屬性值。主要區別是Transition需要觸發一個事件(hover事件或click事件等)才會隨時間改變其CSS屬性；而Animation在不需要觸發任何事件的情況下也可以顯式的隨着時間變化來改變元素CSS的屬性值，從而達到一種動畫的效果。
Animation和Transition一樣有自己相對應的屬性，那么在Animation主要有以下幾種屬性：動畫名稱(animation-name)、動畫持續時間(animation-duration)、動畫的速度曲線(animation-timing-function)、動畫延遲時間(animation-delay)、動畫播放次數(animation-iteration-count)、動畫播放方向(animation-direction)。
參考：
http://www.jb51.net/css/496935.html
https://mp.weixin.qq.com/s/aPWZPhIb1a928okjcLNPhA
https://mp.weixin.qq.com/s/IPS6oZRM_Ie6ZQU21-V9QA
https://mp.weixin.qq.com/s/fmo5ogDucgyYw_cl5Fck0Q