如需在 css3 中建立動畫，您需要學習 @keyframes 規則。
@keyframes 規則用於建立動畫。在 @keyframes 中規定某項 css 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。
例項：@keyframes 屬性名 to }
div元素通過animation呼叫
元素含義
animation-name
規定 @keyframes 動畫的名稱。
animation
所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-duration
規定動畫完成乙個週期所花費的秒或毫秒。預設是 0。
animation-timing-function
規定動畫的速度曲線。預設是 「ease」。
animation-delay
規定動畫何時開始。預設是 0。
animation-iteration-count
animation-direction
animation-play-state
規定動畫是否正在執行或暫停。預設是 「running」。
animation-fill-mode
規定物件動畫時間之外的狀態。
屬性描述
transition
簡寫屬性，用於在乙個屬性中設定四個過渡屬性。
transition-property
規定應用過渡的 css 屬性的名稱。
transition-duration
定義過渡效果花費的時間。預設是 0。
transition-timing-function
規定過渡效果的時間曲線。預設是 「ease」。
transition-delay
規定過渡效果何時開始。預設是 0。
jquery animate()方法
$(selector).animate(styles,speed,easing,callback)
引數描述
styles
必需。規定產生動畫效果的 css 樣式和值。可能的 css 樣式值（提供例項）：backgroundposition/borderwidth/borderbottomwidth/borderleftwidth/borderrightwidth/bordertopwidth/borderspacing/margimarginbottom/marginleft/marginright/margintop/outlinewidth/padding/paddingbottom/paddingleft/paddingright/paddingtop/height/width/maxheight/maxwidth/minheight 注釋：css 樣式使用 dom 名稱（比如 「fontsize」）來設定，而非 css 名稱（比
speed
可選。規定動畫的速度。預設是 「normal」。可能的值：毫秒 （比如 1500）「slow」「normal」「fast」
easing
callback
$(selector).animate(styles,options)
引數描述
styles
必需。規定產生動畫效果的 css 樣式和值（同上）。
options
可選。規定動畫的額外選項。可能的值：speed - 設定動畫的速度easing - 規定要使用的 easing 函式callback - 規定動畫完成之後要執行的函式step - 規定動畫的每一步完成之後要執行的函式queue - 布林值。指示是否在效果佇列中放置動畫。如果為 false，則動畫將立即開始specialeasing - 來自 styles 引數的乙個或多個 css 屬性的對映，以及它們的對應 easing 函式
以及jquery fadein() fadeout() 淡入淡出。
1.兩者都可以通過animate()方法實現動畫效果，相比css3 jquery動畫就一種animate方法。
2.css3不能在display:none和display:block之間進行動畫，並且也不能在height:0和height:auto之間進行動畫。
3.（部落格觀點）由於display:none會引起頁面的重繪事件，所以它是乙個非同步的延時事件，所以瀏覽器其實會先解析animate的**，然後再執行display:none。可以用opacity ：0/1做代替；如果非要用display方法可以用jquery $(item).delay(i * 0.25 * 1000).fadein(1000);實現延時漸顯效果。
4.最好用css做動畫：嚴格的css，因為它更平滑，時間控制得更好。
5.css3中的過渡和animation動畫都是基於css實現機制的，屬於css範疇之內，並沒有涉及到任何語言操作。效率略高與jquery中的animate()函式，但相容性很差。
6.jquery中的animate()函式可以簡單的理解為css樣式的「逐幀動畫」，是css樣式不同狀態的快速切換的結果。效率略低於css3動畫執行效率，但是相容性好。
7.css3 animation 支援的 css 屬性比 jquery 多(屬性詳情見api文件)。
jquery動畫順序執行 JQuery動畫佇列詳解
jquery動畫存在乙個佇列，當在jquery物件上呼叫動畫方法時，如果物件正在執行某個動畫效果，那麼會把後面的動畫效果，放在乙個佇列裡面，然後按順序執行動畫佇列裡面的每乙個動畫。box.hide 1000,function box.show 1000,function box.fadeout sl...
jQuery 動畫與特效
在jquery中使用 hide 和 show 方法來隱藏和顯示 html 元素 hide 的語法形式 selector hide speed,callback show 的語法形式 selector show speed,callback speed 引數規定隱藏 顯示的速度，可以取以下值 slow...
jQuery樣式與動畫
css document ready function 這裡需要 px speech.css fontsize num px 廠商在引入 試驗性的樣式屬性 時，會在其達到css規範要求之前加乙個字首。webkit property name value moz property name value...