我們知道，transform（變形）、transition（過渡）和animation（動畫）是CSS3動畫的3大部分。上一節，我們接觸了CSS3變形，這一節我們來給大家詳細探討一下CSS3過渡效果。
在CSS3中，我們可以使用transition屬性來將元素的某一個屬性從“一個屬性值”在指定的時間內平滑地過渡到“另外一個屬性值”來實現動畫效果（仔細理解這句話）。
CSS transform屬性所實現的元素變形，呈現的僅僅是一個“結果”，而CSS transition呈現的是一種過渡“過程”，通俗點說就是一種動畫轉換過程，如漸顯、漸隱、動畫快慢等。例如 學習網中很多地方都用到了CSS3過渡，當鼠標移動上去的時候，都會有一定的過渡效果。
語法：
transition:屬性 持續時間 過渡方法 延遲時間;
說明：
其實transition屬性是一個復合屬性，主要包含4個子屬性：
（1）transition-property：對元素的哪一個屬性進行操作；
（2）transition-duration：過渡的持續時間；
（3）transition-timing-function：過渡使用的方法（函數）；
（4）transition-delay：可選屬性，指定過渡開始出現的延遲時間；
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3過渡</title>
<style type="text/css">
div
{
display:inline-block;
padding:5px 10px;
border-radius:5px;
background-color:silver;
cursor:pointer;
transition:background-color 1s linear;
-webkit-transition:background-color 1s linear;
-moz-transition:background-color 1s linear;
-o-transition:background-color 1s linear;
}
div:hover
{
background-color:#45B823;
}
</style>
</head>
<body>
<div>CSS3教程</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
上面代碼通過transition屬性指定：當鼠標指針移動到div元素上時，在1秒鐘內讓div元素的背景色從灰色平滑過渡到淺綠色。其中lineaer是過渡函數，在接下來的“過渡函數transition-timing-function屬性”這一節我們會給大家詳細講解。
上面，我們用一個例子讓大家對CSS3過渡動畫有一個感性的認知，在接下來的課程中，我們對transition-property 、transition-duration 、transition-timing-function和transition-delay這4個 transition子屬性進行詳細講解。
transition:background-color 1s linear;
上面這句代碼等價於：
transition-property:background-color; transition-duration:1s ; transition-timing-function:linear; transition-delay:0;
CSS3過渡往往可以與CSS3變形一起使用，可以動態地展示變形的一個過程，豐富的動畫效果。
疑問1、什麼叫復合屬性？
例如我們常見的border屬性也是一個復合屬性，它是由border-width、border-style和border-color這3個子屬性復合而來。