css3裡面新增屬性 transition animation 等等，方便了前端小夥伴們做動畫。不用再用js寫長長的一大串，效果還不好！（這是對我等菜鳥來說，大神們怎麼著都可以，唉！！）用**來實現動畫，其實就是不同時間，元素有不同的狀態。
而這裡面有個很好用的2d轉換屬性：transform，廣大瀏覽器的支援也很不錯。
屬性transform 有很多的值，常用的就：
transform：translate(100px,200px);這個鬼是『』偏移『』，有點類似於定位的relative。該值呢2個引數，分別是x\y兩個方向上的值，只有乙個引數時，預設y是0；
transform：rotate(30deg);這個鬼呢是「旋轉」，引數就是旋轉的度數。預設的旋轉中心是元素的中心，通過transform-origin，可以改變這個中心。
transform：scale(1.2,1.5);這個鬼呢，就是「縮放」了，一般是hover的時候變大一下。2個引數，分別是x、y兩個方向上的縮放比例。
只有乙個引數時，預設y的值等於x的值。
還有skew（） matrix（）這倆貨，官方分別叫「斜切」 「混合」，有點「變形」的意思，用不好！！
扯淡結束，言歸正傳。
1、transition
一般倆值就夠用，第乙個是元素屬性值變化的那個屬性名 ，第二個是過渡時間啦。
如果只是改變了乙個屬性，比如width，transition:width 1s;這樣寫就ok了，但是有多個屬性改變時，圖省事，寫個all吧，代表所有屬性！！
首先呢，用 @keyframe 來定義乙個動畫，動畫名字隨意就好。裡面0% 50%就代表了不同的狀態，根據自己需要還可以再細分（0% 25% 50% 75% 100%）.
0% 和 100%是一樣的，開始和結束是一樣的，中間隨意。
寫好動畫後，就可以『』呼叫『』這個動畫了。
animation:animation1 2s linear 2s 5;
一般最少2個值，動畫名（你隨意寫的那個），完成整個動畫一次的時間。
第三個值是動畫完成過程（ease easeout linear 等），代表這先慢後快 、先快後慢、 線性 。
第三個值是，動畫執行的延遲時間。
第四個值是動畫執行次數，預設是執行一次。無數次是 infinite。自己隨便寫個十次八次也沒問題。
還有別的值，自己查 吧！！裡面很詳細。
處理相容性的話一般這麼寫：
div在@keyframe前面也加字首就ok了，
eg： -moz-@keyframe如果都寫的話，好長啊！！
先到這裡，有時間再補充！！！！！
CSS3過渡和動畫
此文首發於 lijing0906.github.io 智慧型運維,圓球一直勻速旋轉。html id testpage class topbar class ball src css3anitran 0.png alt srcset div class bottombar src css3anitra...
CSS3動畫 過渡
css3過渡是元素從一種樣式轉換成另一種樣式。使用transition屬性 transition property 過渡的名稱 transition duration 過渡效果花費的時間 transition timing function 過渡效果的時間曲線 transition delay 過渡...
CSS3 過渡 動畫
css3 過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須規定兩項內容 應用於寬度屬性的過渡效果，時長為 2 秒 div 注釋 如果時長未規定，則不會有過渡效果，因為預設值是 0。效果開始於指定的 css 屬性改變值時。css 屬性改變的典型時間是滑鼠指標位於元素上時 規定當滑鼠指標懸...