CSS過渡效果是在元素從一種樣式轉(zhuǎn)換成另外一種樣式時(shí)應(yīng)用的動(dòng)畫效果。其實(shí)實(shí)現(xiàn)過渡效果很簡(jiǎn)單，只要使用CSS屬性transition即可。

.example{
width: 100px;
height: 100px;
background-color: red;
transition: background-color 1s;
}
.example:hover{
background-color: blue;
}

在上面的代碼中，我們定義了一組樣式為example類的元素，并為其設(shè)置了一個(gè)過渡效果。

transition屬性的使用方法為： transition: property duration timing-function delay;

• property：過渡屬性名稱，如background-color（可以同時(shí)指定多個(gè)屬性，中間用逗號(hào)隔開）
• duration：過渡持續(xù)時(shí)間，如1s
• timing-function：過渡的時(shí)間函數(shù)，如ease
• delay：是動(dòng)畫開始之前的延遲時(shí)間，如0.5s（可選）

接下來，在example:hover中設(shè)置了背景色變?yōu)樗{(lán)色。點(diǎn)擊鼠標(biāo)時(shí)，元素的背景顏色將從紅色漸變到藍(lán)色，過程持續(xù)時(shí)間為1秒鐘。

除了簡(jiǎn)單的顏色過渡，還可以使用過渡來實(shí)現(xiàn)元素位置、大小、透明度等等的動(dòng)畫效果。

.example{
width: 100px;
height: 100px;
background-color: red;
transition: all 0.5s;
}
.example:hover{
width: 200px;
height: 200px;
opacity: 0.5;
transform: rotate(45deg);
}

在上面的代碼中，我們使用transition: all 0.5s; 來表示所有屬性都需要過渡效果，過渡時(shí)間為0.5秒。

在example:hover中設(shè)置了元素寬高變?yōu)樵瓉淼膬杀叮该鞫葴p半并且旋轉(zhuǎn)45度。當(dāng)鼠標(biāo)移動(dòng)到該元素上時(shí)，元素將產(chǎn)生從小變大、透明度變化并旋轉(zhuǎn)的過渡動(dòng)畫。

最后，需要注意的是，不是所有屬性都支持過渡效果。例如，display和position屬性就不支持過渡。因此，在應(yīng)用過渡效果時(shí)要注意屬性的兼容性。