譯者：蔣宇捷
今天我們將要只使用css3來建立乙個動畫**表。完全不使用jquery，不使用，不使用flash。
css3線性漸變
css3放射漸變
css3轉換
css3動畫
首先我們要編寫基本的html**作為開始。這樣我們需要乙個**可以放置我們所有的內容。這個**有四列六行，**如下所示：
basic plan for small size business.
run multiple website on single cp.
use this for high traffic websites.
現在為我們的html檔案加上樣式，這裡我想使用3個不同的漸變，頭部和**行採用線性漸變，剩下的行採用放射漸變。如下的**帶有詳細解釋。
/* 基本的布局，所有的**都放在這裡面 */現在到了編寫動畫的時間。我想讓每一列在滑鼠懸停時比原始尺寸更大一些。要實現此效果我們採用css3的轉換屬性：列的原始大小為1，當滑鼠懸停時變為1.1。如下的**帶有注釋。#grid
/* 第一列 */
#detail
/* 第二列 */
#basic
/* 第三列 */
#premium
/* 第四列 */
#ultimate
/* 頭部 */
h1 li
li /* 為li的最後乙個元素設定另外乙個樣式 */
ul li:last-child
/* 現在我們設定轉換效果來增大滑鼠懸停時每一列的大小 */現在當滑鼠放在每一列時，需要顯示乙個coda bubble樣式（譯者注：coda bubble是乙個jquery的外掛程式，用於顯示冒泡效果的提醒彈出框）的彈出視窗。我們將在每個div下使用乙個div來達到目的（#basic、#premiun、#ultimate）。最開始我們將div的透明度設定為0，當滑鼠懸停時透明度變為1。在轉換效果淡出0.5秒的延遲後，根據你想要視窗彈出的位置設定它的margin。下面的css**帶有注釋。#basic
/* increase the size of coloumn 10% when hovered */
#basic:hover
#premium
#premium:hover
#ultimate
#ultimate:hover
#basic > div#basic:hover > div
#premium > div
#premium:hover > div
#ultimate > div
#ultimate:hover > div
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...
CSS3中Transition動畫屬性用法詳解
w3c標準中對css3的transition這是樣描述的 css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠單擊 獲得焦點 被點選或對元素任何改變中觸發，並圓滑地以動畫效果改變css的屬性值。transition屬性的值包括以下四個 transition ...
CSS基礎 CSS3動畫
通過css3動畫屬性，我們可以建立動畫，實現簡單的動畫效果。css3動畫的實現需要用到animation屬性並配合關鍵幀 keyframes 使用。1.對需要設定動畫的元素新增animation屬性。2.設定關鍵幀 keyframes animation是所有動畫屬性的簡寫屬性，除了 animati...