前情提要：這是一些有關過渡和動畫的基礎知識，一定能幫助平時懶得梳理的你。
1、css3過渡是元素從一種樣式逐漸改變為另一種的效果。
2、實現過渡效果的兩個要件：
規定把效果新增到那個css屬性上。
規定效果時長
定義動畫的規則： 過渡transition （作用） 將元素的某個屬性從「乙個值」在指定的時間內過渡到「另乙個值」
translate（）：移動，根據左(x軸)和頂部(y軸)位置給定的引數，從當前元素位置移動。
rotate（）：旋轉，在乙個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
scale（）：縮放，該元素增加或減少的大小，取決於寬度（x軸）和高度（y軸）的引數：
skew（）：傾斜，包含兩個引數值，分別表示x軸和y軸傾斜的角度，如果第二個引數為空，則預設為0，引數為負表示向相反方向傾斜。
matrix（）：混合，matrix 方法有六個引數，包含旋轉，縮放，移動（平移）和傾斜功能。
每種轉化都還有對應的3d版本
注意：閉合的內聯元素不支援轉化，過渡和動畫：如、、等。可以通過新增樣式 display: inline-block 或 display: block 來轉化成塊級元素。
語法 ：
transition-property屬性的名字（如果是乙個屬性就帶有這個屬性的名字；如果是多個屬性，屬性名之間用逗號隔開；如果是所有屬性，用all表示即可。）表示對哪個屬性進行變化。
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。可以改變任意多的樣式任意多的次數。動畫效果是通過animation屬性來完成的。
為了得到最佳的瀏覽器支援，應該始終定義 0% 和 100% 選擇器。
實現動畫效果兩要件：
1、首先要定義乙個動畫 ，定義乙個@keyframes 規則（關鍵幀）
2、呼叫動畫 動畫定義好之後，使用animation 屬性呼叫動畫
（二）、animation屬性設定動畫效果
animation-timing-function 屬性值如下：
1動畫製作過程 2 1.通過@keyframes規則建立動畫34/*建立動畫，字型顏色由紅變藍 */5
@keyframes changecolor
7to 8}
9 2.元素繫結動畫
1011
span
15 3.動畫還可以使用百分比來更加精細的控制動畫流程：
1617
@keyframes changecolor
19 25%
20 50%
21 75%
22 100%
23 }
CSS3過渡與動畫
規定過渡效果的 css 屬性名 webkit transition property none all property moz transition property none all property ms transition property none all property o tran...
CSS3過渡與動畫
過渡是兩個狀態之間的過渡，只能從一種狀態過渡到另一種狀態 過渡需要事件觸發，不能自動執行 可以同時控制多個屬性進行過渡，多個屬性之間用逗號隔開 csstransition width 2s linear 1s,height 2s linear 1s transition duration trans...
CSS3動畫 過渡
css3過渡是元素從一種樣式轉換成另一種樣式。使用transition屬性 transition property 過渡的名稱 transition duration 過渡效果花費的時間 transition timing function 過渡效果的時間曲線 transition delay 過渡...