css 3 中的動畫呈現（11月18日）
一、2D/3D的轉換：
| transform | 向元素應用 2D 或 3D 轉換。 |
（1）平移屬性：
transform：translate（x，y）其中只寫一項的值為左右平移的值。（數值的正負性：左負右正，上負下正）
transform：translateX（）僅限左右移動。
transform：translateY（）僅限上下移動。
（2）旋轉屬性：
transform：rotate（Xdeg）括號中填需要旋轉的角度值，正值順時針，負值逆時針。
（3）縮放屬性:
transform:scale( )括號中填寫數值。大於1為放大，0~1之間的為縮小。
（4）傾斜屬性：
transform：skew（Xdeg，Xdeg）
| transform-origin | 允許你改變被轉換元素的位置。 |
transform-origin：right（left） top（bottom） % 具體像素
二、過渡屬性：
| transition | 簡寫屬性，用於在一個屬性中設置四個過渡屬性。 |
transition：過渡對象 過渡時間 過渡時間的頻率 延遲時間
三、@keyframes動畫（自定義動畫）：
| animation | 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 |
animation調用自定義動畫。
| animation-name | 規定 @keyframes 動畫的名稱。 |
| animation-duration | 規定動畫完成一個周期所花費的秒或毫秒。 |
| animation-timing-function | 規定動畫的速度曲線。 |
其中可以用%來定義動畫的開始和結束：開頭為0%，結尾為100%。
四、媒體查詢功能：
media屬性規定被鏈接文檔將顯示在什麽設備上。media屬性用於為不同的媒介類型規定不同的樣式。
（1）media的調用方式：
方法一：用link調用
media=“all and （屏幕尺寸分界像素）”
方法二：在css 頁面列表中
@media書寫
五、自創屬性：
只要在自創的屬性名稱前面加上“data-”就可以自創屬性。
然後在後續中的文本中用content：“（“attr（data-自創屬性名）”）”調用即可。
六、彈性盒子（手機端用到的比較多）：
改變順序：divection 屬性為rtl（right-to-left）
flex-direction：彈性子元素在父元素中的位置
本文出自 “Trouble-Maker” 博客，請務必保留此出處http://13356335.blog.51cto.com/13346335/1984090
css 3 中的動畫呈現（11月18日）