結構：transition-->animation-->transform
今天接觸了一點css3中的transition和transform；在這裡寫一下自己的一些記憶點，不知對不對，如果有認知不同之處，請大方的指出，謝謝；
css3中提供了一些可以讓元素進行動態的改變，產生一種flash動畫的效果，例如：旋轉(rotate)、縮放（scale）、傾斜（skew）、移動（translate）、這些都是transform中的一些屬性、為了相容特定的瀏覽工具；需要加上字首-webkit；即-webkit-transform：這個css屬性是用來定義元素的變形的，而真正的讓元素產生動畫的連貫效果需要乙個元素來封裝-webkit-transform中的屬性，一般使用keyframes來完成這個操作，給乙個動畫定義個名字：@-webkit-keyframes{}然後通過webkit-animation進行呼叫，在webkit-animation中，封裝了很多的屬性：name,duration,timing-function,delay,iteration-count,direciton；其中name就是用來呼叫webkit-keyframes中的樣式，而這些樣式最頂級的元素應該是webkit-transition，它下面的屬性包括了：animation，而animation是乙個符合元素，它自身就已經包含了一些效果，但是為了達到更好的擴充套件性，就通過乙個命名的方式webkit-keyframes來擴充套件功能，下面羅列出來一些webkit-animation中的屬性詳情：
-webkit-animation:仍舊是乙個復合屬性，
-webkit-animation: name duration timing-function delay iteration_count direction;
包括以下幾個屬性
1、-webkit-animation-name 這個屬性的使用必須結合 @-webkit-keyframes 一起使用
#rotate/* 定義要呼叫的動畫 */
@-webkit-keyframes x-spin
50%
100%
百分比的意思就是duration的百分比，如果沒有設定duration的話，則表示為無窮大；
2、-webkit-animation-duration 表示動畫持續的時間，預設為0；
4、-webkit-animation-delay 表示開始動畫之前的延時
[語法] -webkit-animation-delay: delay_time;
5、-webkit-animation-iteration-count 表示動畫迴圈的次數，infinite即為無限次，預設是1。
[語法]-webkit-animation-iteration-count: times_number;
6、-webkit-animation-direction 表示動畫的方向
[語法]-webkit-animation-direction: normal(預設) | alternate
normal 方向始終向前
alternate 當重複次數為偶數時方向向前，奇數時方向相反
7、[另外]跟animation有關的其他屬性
（1）-webkit-animation-fill-mode : none (預設)| backwards | forwards | both 設定動畫開始之前和結束之後的行為（測試結果不是很清晰）
（2）-webkit-animation-play-state: running（預設） | paused 設定動畫的執行狀態。
詳細介紹請參考官方文件：
CSS3設定動畫效果
製作動畫分為兩步 先定義動畫 用keyframes定義動畫 keyframes 動畫名稱 100 0 是動畫的開始，100 是動畫的完成，當然也可以設定多個動畫過程，比如20 50 from和to等同於0 和100 再使用動畫 div動畫屬性 屬性說明 animation timing functi...
css3裡的動畫元素
相信學習了html的同學對動畫元素一定是不陌生了。那我們今天就來了解了解動畫元素的一些基本概念 動畫元素的屬性是 animation 這個動畫元素與我們學習的位移元素又有些相似的地方，但是他們又不盡相同。那我們就來看看他們的相同點和不同點都有哪些 animation vs transtion 位移 ...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...