CSS動畫是一種很酷的方式來讓你的網站看起來更加動態。它能夠讓你設計出很炫酷的效果，并且使得網站實現非常流暢的過渡效果。今天，我們將會學習如何利用CSS將網頁中的元素變成動畫。

為了將你的CSS做成動畫效果，最好的方式就是利用CSS3 Transition和Animation屬性。

/*你可以使用CSS3 Transition屬性，使元素實現一個簡單的動畫效果*/
.box{
width: 200px;
height: 200px;  
transition: width 2s ease;
}
.box:hover{
width: 400px;
}
/*我們也可以使用CSS3 Animation屬性，實現更加酷炫的動畫效果*/
@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.box{
width: 200px;
height: 200px;  
animation: rotate 2s linear infinite;
}

在上面的代碼中，當我們將鼠標指針懸浮在box元素上時，它的寬度會從200px動態過渡到400px，然后將回歸原始寬度。此外，我們利用了CSS3 Animation屬性，使box元素進行了一個360度的旋轉，持續時間達到了2秒。

需要注意的是，CSS3 Animation屬性會使用一段關鍵幀（keyframes），這將會規定動畫變化的程度。從上面的例子中，你可以看到我們定義了一個keyframes，它規定了旋轉動畫的起始狀態（from）和結束狀態（to）。

總之，如果你想要實現一個炫酷的動畫效果，利用CSS3 Transition和Animation屬性是一個非常好的選擇。讓我們來嘗試一下，投入到CSS動畫魔法的世界吧！