>>>

css常見製作動畫的三個屬性：變形（Transform）,轉化（Transition），動畫（Animation）基本使用語法如下：

• Transform：變形主要包括旋轉（rotate）,扭曲（skew）,縮放(scale),移動(translate),矩形變形(matrix) rotate旋轉：正數表示順時針旋轉，負數表示逆時針旋轉； translate移動 ：可以水平和垂直方向同時移動 ；可以translate（x,y）或者translateX(x) translateY(Y) scale縮放，skew扭曲 用法和translate一樣 矩陣matrix
  用一個含有六值的（a,b,c,d,e，f）變化矩陣的形式指定一個2D變換。其實就是基於水平方向和垂直方向重新定位元素。 改變元素基點transform-origin 主要作用就是讓我們進行transform動作之前可以改變元素的基點位置。我們元素預設基點就是其中心位置，利用這個屬性進行元素基點位置的改變。

• Transition：快速記憶法 <property><duration><animation type><delay>主要如下圖所示
• Animation

需要先了解一下 keyframes（關鍵幀） 語法規則 @keyframes 動畫名稱 { 括號裡面是一些不同時 間段樣式規則，一般是由多個百分比構成的如0% 到 100% 之間 }

其中 IDENT是動畫名稱，可以隨便取

animation-name:此處為動畫的名稱 需要和@keynames裡面的IDENT的名稱是一樣的 可以同時賦值幾個 中間用逗號相隔 即可。

animation-duration: 指定元素播放動畫所持續的時間長 取值為數值 單位為 秒 預設值為“0”

animation-timing-function: 指的是屬性值的變換速率，說的簡單點就是動畫的播放方式，主要有六種：ease,ease-in,ease-in-out,linear,cubic-bezier

animation-delay:用來指定元素動畫開始時間

animation-iteration-count:用來指定元素播放動畫的迴圈次數 取值為number 預設值為"1" infinite為無限次數迴圈

animation-direction： 指定元素動畫播放的方向 預設為normal表示每次迴圈都是向前播放；另一個是alternate 表示第偶數向前播放，奇數向反方向播放

animation-play-state:指定元素的播放狀態； running和 paused

轉載於:https://my.oschina.net/kxhome/blog/1551950