CSS3 Animation是CSS的一個(gè)模塊，它主要的目的是為了實(shí)現(xiàn)動(dòng)畫效果。這個(gè)模塊引入了很多新的屬性，使得我們?cè)诰W(wǎng)頁(yè)中實(shí)現(xiàn)動(dòng)畫效果變得更加容易和便捷。其中一個(gè)重點(diǎn)是CSS3過渡（transition），它可以讓我們?cè)贑SS屬性發(fā)生變化時(shí)，產(chǎn)生平滑的過渡效果。

/* transition屬性的語(yǔ)法 */
transition: property duration timing-function delay;

其中，property表示我們要進(jìn)行過渡的CSS屬性，比如background-color、height、width等等。duration表示過渡的持續(xù)時(shí)間，以秒（s）或毫秒（ms）為單位。timing-function用來指定過渡的速度變化規(guī)律，比如ease-in-out、linear和cubic-bezier()等。最后是delay，表示指定的時(shí)間之后開始過渡。

/* 過渡示例 */
div {
width: 50%;
height: 150px;
background-color: blue;
transition: all 1s ease;
}
div:hover {
width: 100%;
background-color: red;
}

上述代碼定義了一個(gè)<div>，它初始顏色為藍(lán)色，寬度為50%。在鼠標(biāo)懸停在上面時(shí)，寬度和背景色會(huì)發(fā)生過渡，并在1秒內(nèi)平滑地從藍(lán)色過渡到紅色，并從50%變?yōu)?00%。

除了過渡常用的all、background-color、color等，CSS3還引入了一些新的過渡屬性，比如transform、opacity等。transform可以讓元素旋轉(zhuǎn)、縮放、移動(dòng)等，并且能夠和過渡和動(dòng)畫一起使用，實(shí)現(xiàn)更為炫酷的效果。opacity則可以控制元素的透明度。

/* transform和opacity過渡示例 */
div {
width: 50%;
height: 150px;
background-color: blue;
transform: rotate(45deg);
opacity: 0.5;
transition: all 1s ease;
}
div:hover {
width: 100%;
opacity: 1;
transform: rotate(0deg);
background-color: red;
}

上述代碼定義了一個(gè)<div>，它初始旋轉(zhuǎn)45度，透明度為0.5。在鼠標(biāo)懸停在上面時(shí)，寬度和背景色會(huì)發(fā)生過渡，并在1秒內(nèi)平滑地從藍(lán)色過渡到紅色，并從50%變?yōu)?00%。同時(shí)，它的透明度也會(huì)發(fā)生過渡，從0.5過渡到1，同時(shí)旋轉(zhuǎn)變?yōu)?度。

CSS3過渡是一種簡(jiǎn)單靈活，易于實(shí)現(xiàn)的動(dòng)畫效果，它可以讓我們的網(wǎng)頁(yè)更加生動(dòng)有趣。