在網頁設計中，動畫效果能給用戶帶來更好的視覺體驗，讓網頁更加生動。CSS中有多種方式可以給元素添加動畫效果，比如過渡、位移、旋轉、縮放等效果。下面我們來介紹幾種常用的動畫效果。

/* 過渡動畫效果 */
.box{
width: 200px;
height: 200px;
background-color: #333;
transition: width 1s linear; 
}
.box:hover{
width: 400px;
}
/* 位移動畫效果 */
.box{
width: 200px;
height: 200px;
background-color: #333;
position: relative;
left: 0;
top: 0;
}
.box:hover{
left: 200px;
top: 200px;
transition: all 1s ease-in-out;
}
/* 旋轉動畫效果 */
.box{
width: 200px;
height: 200px;
background-color: #333;
transform: rotate(0deg);
transition: all 1s linear;
}
.box:hover{
transform: rotate(360deg);
}
/* 縮放動畫效果 */
.box{
width: 200px;
height: 200px;
background-color: #333;
transform: scale(1);
transition: all 1s ease-in-out;
}
.box:hover{
transform: scale(1.5);
}

以上是四種常用的CSS動畫效果，大家可以根據實際需求選取適合的動畫效果進行使用。在實際應用中，還可以結合JavaScript實現更加復雜的動畫效果。