在CSS2的世界中，過渡常常是非常單薄的，要麼是從一種顏色變成另一種顏色、要麼是從不透明變到透明，總而言之就是由一種狀態變到另外一種狀態。這就導致了很多頁面給人的感覺很突兀，沒有一個平滑的過渡。
雖然我們可以使用DHTML或者諸如jQuery等其他第三方的庫文件來完成過渡效果，但是爲了完成一個簡單的效果我們就需要大量的編碼。
我們所需要的就是用一種簡單的方法來實現這些過渡，因爲我相信在今後的WEB應用中，平滑的過渡越來越成爲一種標準的展現形式。
CSS3 現在已經添加到了Webkit中，現在 Apple Safari 和 Google Chrome 都已經開始支持。再往前推幾個月，那個時候人們還在爭論是否將這些過渡寫在CSS3中，一些人堅持認爲過渡並不是一種樣式屬性，應當用腳本來進行處理。經過衆多人的努力，樣式不僅限於靜態的樣式，動態的樣式也是非常需要的。於是過渡的樣式終於開始寫入CSS3的官方文檔中。
廢話少說，進入正題。
本文的例子需要支持CSS3的瀏覽器，所以你最好使用 Safari 或者 Chrome 來測試。
過渡、狀態和動作
我們知道，CSS中都是通過僞類來實現頁面中的一個元素與用戶互動的。例如，用戶鼠標的懸停和移動。下面列出了幾個僞類：
| Dynamic Pseudo Class | Elements Affected | Description |
| :link | Links only | Unvisited links |
| :visited | Links only | Visited links |
| :hover | All elements | Mouse cursor over element |
| :active | All elements | Mouse clicks element |
| :focus | All elements that can be selected | Element is selected |
| None | All elements | Default state of all elements |
過渡包含哪些元素
一個從藍色變成紅色的動態過渡包含哪些元素呢，我們先看一個實例：
#css3tr a:link {
display:block;
height:30px;
line-height:30px;
width:100px;
border:5px solid #cccccc;
text-align:center;
-webkit-transition:width .25s ease-in-out, background-color .25s linear;
transitiona:width .25s ease-in-out, background-color .25s linear;
}
#css3tr a:hover {
color:red;
background-color:#e9e9e9;
width:200px;
-webkit-transition: width .25s ease-in-out, background-color .25s linear;
transition:width .25s ease-in-out, background-color .25s linear;
}
由此可見，transition 屬性中包含了三個基本的屬性：樣式屬性(CSS property)、持續時間(Duration)、計時函數(Timing Function)、延時(Delay)
看到這個圖，大家對於這幾個參數的作用應該瞭解了吧。很簡單的幾個參數設置，實現了我們之前需要用大量js腳本實現的效果，那麼有什麼理由不期待CSS3的到來呢。
可以應用過渡的元素：
| CSS Property | What Changes |
| background-color | Color |
| background-image | Only gradients |
| background-position | Percentage, length |
| border-bottom-color | Color |
| border-bottom-width | Length |
| border-color | Color |
| border-left-color | Color |
| border-left-width | Length |
| border-right-color | Color |
| border-right-width | Length |
| border-spacing | Length |
| border-top-color | Color |
| border-top-width | Length |
| border-width | Length |
| bottom | Length, percentage |
| color | Color |
| crop | Rectangle |
| font-size | Length, percentage |
| font-weight | Number |
| grid-* | Various |
| height | Length, percentage |
| left | Length, percentage |
| letter-spacing | Length |
| line-height | Number, length, percentage |
| margin-bottom | Length |
| margin-left | Length |
| margin-right | Length |
| margin-top | Length |
| max-height | Length, percentage |
| max-width | Length, percentage |
| min-height | Length, percentage |
| min-width | Length, percentage |
| opacity | Number |
| outline-color | Color |
| outline-offset | Integer |
| outline-width | Length |
| padding-bottom | Length |
| padding-left | Length |
| padding-right | Length |
| padding-top | Length |
| right | Length, percentage |
| text-indent | Length, percentage |
| text-shadow | Shadow |
| top | Length, percentage |
| vertical-align | Keywords, length, percentage |
| visibility | Visibility |
| width | Length, percentage |
| word-spacing | Length, percentage |
| z-index | Integer |
| zoom | Number |
過渡的時間和延時：
| Name | How It Works |
| cubic-bezier(x1, y1, x2, y2) | X and Y values are between 0 and 1 to define the shape of a bezier curve used for the timing function. |
| linear | Constant speed |
| ease | Gradual slowdown |
| ease-in | Speed up |
| ease-out | Slow down |
| ease-in-out | Speed up and then slow down |
現在，就期待CSS3早日全面普及吧。