通常當CSS 的屬性值變更後，瀏覽器會立即更新對應的樣式，例如當滑鼠停留在元素上時，透過:hover 選擇器定義的樣式會立即套用在元素上。在CSS3 中加入了一項過渡功能，透過該功能您可以將元素從一種樣式在指定時間內平滑的過渡到另一種樣式，類似於簡單的動畫，但無需借助flash 或JavaScript。
CSS 中提供了5 個有關過渡的屬性，如下所示：
要成功達到過渡效果，必須定義以下兩項內容：
（1）元素中參數與過渡效果的屬性；
（2）過渡效果持續的時間。
提示：過渡效果通常會在滑鼠懸停在元素上時發生，如果未設定過渡持續的時間，則過渡效果不會生效，因為過渡時間的預設值為0。
1. transition-property
transition-property 屬性用來設定元素中參與過渡的屬性名稱，語法格式如下：
transition-property:none|all|property;
參數說明如下：
none：表示沒有屬性參與過渡效果；
all：表示所有屬性都參與過渡效果；
property：定義套用過渡效果的CSS 屬性名稱列表，多個屬性名稱之間使用逗號,進行分隔。
範例程式碼如下：
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-property:width,background-}div:hover{wid:200000 color:blue;}</style></head><body><div></div></body></html>運行結果：
2. transition-duration
transition-duration 屬性用來設定過渡所需花費的時間（單位為秒或毫秒），語法格式如下：
transition-duration:time;
其中，time 為完成過渡效果所需花費的時間（單位為秒或毫秒），預設值為0，表示不會有效果。
如果有多個參與過渡的屬性，也可以依序為這些屬性設定過渡所需的時間，多個屬性之間會使用逗號進行分隔，例如transition-duration: 1s, 2s, 3s;。除此之外，也可以使用一個時間來為所有參與過渡的屬性設定過渡所需的時間。範例程式碼如下：
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-property:width,backgrounds;transition-duration:.250px;transition-property:width,backgrounds;transition-duration:.25001; :hover{width:200px;background-color:blue;}</style></head><body><div></div></body></html>3. transition-timing-function
transition-timing-function 屬性用來設定過渡動畫的類型，屬性的可選值如下：
4. transition-delay
transition-delay 屬性用來設定過渡效果何時開始，屬性的語法格式如下：
transition-delay:time;
其中，參數time 用來設定在過渡效果開始之前需要等待的時間，單位為秒或毫秒。
5. transition
transition 屬性是上面四個屬性的簡寫形式，透過該屬性可以同時設定上面的四個屬性，屬性的語法格式如下：
transition:transition-propertytransition-durationtransition-timing-functiontransition-delay;
transition 屬性中，transition-property 和transition-duration 為必填參數，transition-timing-function 和transition-delay 為選填參數，如非必要可以省略不寫。另外，透過transition 屬性也可以設定多組過渡效果，每組之間使用逗號進行分隔，範例程式碼如下：