css animations 主要有兩塊構成，那麼是哪兩塊呢？
keyframes : 定義了什麼階段展示什麼樣的動畫
animation 屬性 ：把動畫掛載到乙個具體的dom上，並且定義如何動起來；
keyframes 是動畫的基礎，它定義了動畫在各個階段的時間線上應該如何呈現。每乙個@keyframes 都應該包括下面：
動畫的名字， 比如說， @ keyframes bouncein
動畫的各個階段，0% 是最開始的階段， 100%是最終的階段，中間可以新增多個中間狀態
css的屬性，在動畫的各個階段，css的屬性分別是什麼樣的
下面是乙個簡單的 @keyframes :
@keyframes
bouncein
60
%
100
%
}
（如果你還對 css 強大的 transform 屬性不熟悉的話，可以看我另外關於 transform 總結的教程， 強大的transform 配合 animation 簡直就是魔法般的效果）
我們使用@keyframes 宣告好了乙個動畫， 但是還不夠，我們要使用animation 屬性
animation 屬性做了兩件事情：
把動畫新增到了你想新增的那個元素
定義動畫是如何動起來的
所以，下面兩個屬性必須要新增到 dom 節點上： animation-name , animation-duration;
div
div
採用 合寫 的寫法，所有的動畫屬性，我們都要掛到animation 這個屬性下面：
animation:[
animation
-name][
animation
-duration][
animation
-timing
-function
]
[
animation
-delay][
animation
-iteration
-count][
animation
-direction
]
[
animation
-fill
-mode][
animation
-play
-state
];
請記住：要讓動畫正常的動起來，要按照上面的順序來寫，並且前兩個屬性是一定要有的。
為了構建更複雜的動畫，需要再 將要運動的物體上 新增自定義屬性：
animation-timing-function
設定緩動：ease( 預設 ) | ease-in | ease-out
animation-delay
animation-interaction-count
動畫要迴圈多少次：#（預設是1） | infinite | initial
animation-direction
動畫要正著播，倒著播：normal( 預設 ) | reverse | alternate | alternate - reverse ( 後面兩個的在animation-interaction-count>1的情況下起作用 )
animation-fill-mode
none(預設) | forwards | backwards | both
animation-play-state
running | pause 暫停後開始，是從之前位置無縫鏈結；
（animation-play-state : 不可以在animation 中簡寫，需要單獨的加在要運動的動畫身上)
你也可以在乙個dom元素上增加多個 動畫，他們之間只需要用 逗號隔開：
.
div
animation 和 transition 的效果是很像的；
animation 是 定義乙個動畫，然後掛載到要運動的物體身上；
transition 是把transition 的屬性寫在要變化的物體身上，然後hover的時候改變樣式；
transition可以當成是只有兩幀的animation;
transition 和 transfrom 單詞長的是很像的；
transfrom 作用是 2d 3d 的轉換，
transfrom的主要方法有：
-webkit-transform : translate ( 10px , 20px ) // 常用在絕對定位的水平居中，垂直居中；
-webkit-transform : rotate( 12deg )
-webkit-transform : scale ( 1,3 ) 寬度放大1倍，高度放大3倍
-webkit-transform : skew（30deg,60deg） 沿x軸旋轉的角度，沿y軸旋轉的角度
transform-origin : 變換的基點
null
CSS3中的動畫
animation實現動畫主要由兩個部分組成 通過類似flash動畫的關鍵幀來宣告乙個動畫 在animation屬性中呼叫關鍵幀宣告的動畫實現乙個更為複雜的動畫效果 設定關鍵幀 keyframes spread 33 66 100 注意 寫相容的時候瀏覽器字首是放在 keyframes中間 例如 w...
CSS3中的動畫
動畫 animation 是css中具有顛覆性的特徵之一，可以通過設定多個節點來精確控制乙個，或一組動畫 常用來實現複雜的動畫效果。1.動畫的基本使用 製作動畫分為兩步 先定義動畫 再使用 呼叫 動畫 用keyfames定義動畫 類似定義類選擇器 keyframes 動畫名稱 100 動畫基本使用命...
CSS3中的動畫
一.css3變形 css3變形是一些效果的集合 如平移 旋轉 縮放 傾斜效果 每個效果都可以稱為變形 transform 它們可以分別操控元素發生平移 旋轉 縮放 傾斜等變化 二.css3位移 translate style type text css li a hover style 三.css3...