CSS3提供了一種全新的方式來定義CSS屬性改變時的過渡效果，通常在:hover、:focus的條件下觸發。過去，為了實現這種平滑的過渡效果，我們需要藉助於Flash技術，現在只需要簡單的使用CSS3 Transition的方法，就可以實現。Transition的效果，可以廣泛的應用在background-color、width、height、opacity等屬性發生改變時。目前，CSS3 Transition模組還在草案階段，所以規範和語法還未完全確定下來，目前也並不是所有的瀏覽器支援CSS3，所以還需要一些特殊的程式碼來實現多瀏覽器的相容。
下面用一個簡單的例子來說明CSS3 Transition的效果：
CSS3 Transition的語法：
transition: <transition> [, <transition>]*
<transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>
這種寫法是比較簡單的寫法，我們可以同時寫多個Transition效果，每個效果按照固定屬性的順序書寫。如下
transition的屬性包括：需要應用的屬性transition-property、Transition的時間transition-duration、時間函式transition-timing-function、延遲時間（可選引數）transition-delay。這些屬性也可以單獨的指定，分別介紹如下：
transition-property
如果使用all關鍵字或者省略了transition-property，那麼所有發生變化的屬性都會應用transition，如果使用none關鍵字，則不會有transition效果。如果指定了多個屬性，那麼在其他的transition-*屬性中，也需要按照對應的順序指定。所有支援Transition的屬性，可以在3中看到。
transition-duration
這個屬性接受以逗號分割的一系列數值，表示Transition持續的時間，接受2s或者2000ms的形式。預設值為0,表示Transition立即生效。
transition-duration: <time> [, <time> ]*
transition-timing-function
這個屬性指定transition的效果，可以通過預定義的函式來實現（ease、linear、ease-in、ease-out、ease-in-out），也可以自己指定函式。
transition-timing-function:<timing-function> [, <timing-function>]*
下面看一下預定義的函式的效果
transition-delay
這個是一個可選屬性，可以用來制定在多長時間後觸發transition，預設是0.
transition-delay: <time> [, <time> ]*