CSS3是web前端開發(fā)中不可或缺的一環(huán)。除了實現(xiàn)樣式和布局之外，它還可以幫助我們創(chuàng)建各種動畫效果。在這篇文章中，我們將重點介紹CSS3中兩個常用的動畫效果：旋轉(zhuǎn)和淡入淡出。

/* 旋轉(zhuǎn)動畫效果 */
.rotate {
transition: transform 1s ease;
}
.rotate:hover {
transform: rotate(360deg);
}
/* 淡入淡出動畫效果 */
.fade {
opacity: 0;
transition: opacity 1s ease;
}
.fade:hover {
opacity: 1;
}

第一個動畫效果是旋轉(zhuǎn)動畫。其實現(xiàn)原理非常簡單：通過CSS的transform屬性使元素繞其中心點旋轉(zhuǎn)一定角度。在這段代碼中，我們將鼠標懸浮在元素上時，觸發(fā)旋轉(zhuǎn)效果。transition屬性指定了過渡的屬性及過渡時間和緩動函數(shù)，而:hover偽類則是觸發(fā)動畫效果的觸發(fā)器。

第二個動畫效果是淡入淡出動畫。這個效果通常用于展示圖片等元素。初始狀態(tài)下，元素的不透明度為0，當鼠標懸浮在元素上時，元素的不透明度變?yōu)?，從而呈現(xiàn)出淡入淡出的效果。同樣，這個效果需要利用transition屬性和:hover偽類來實現(xiàn)。

總結(jié)來說，CSS3提供了很多方便易用的動畫效果，能夠為網(wǎng)頁帶來更豐富的交互體驗。上述兩個動畫效果只是其中的一小部分，希望能夠為大家的Web開發(fā)工作帶來幫助。