CSS 動畫是網頁設計中的一項非常重要的技能。一個有效的動畫可以讓網頁更具吸引力和活力。在本文章中，我們將學習如何使用 CSS 動畫來改變 HTML 元素的大小。

/* 讓元素在 2 秒內從 100px 的大小過渡到 300px */
.element{
width: 100px;
height: 100px;
background-color: red;
animation: animate 2s;
}
/* 創建動畫 */
@keyframes animate {
from {width: 100px; height: 100px;}
to {width: 300px; height: 300px;}
}

上面的代碼使用了 CSS 動畫來讓 class 為 "element" 的元素在 2 秒內從 100px 的大小過渡到 300px。關鍵是設置了動畫名稱為 "animate"，然后在@keyframes中描述了動畫如何運作，相當于一個狀態變化的過渡。

你還可以在 CSS 動畫中使用百分比來控制過渡效果：

/* 讓元素在 2 秒內從 50% 到 100% 的大小過渡 */
.element{
width: 50%;
height: 50%;
background-color: red;
animation: animate 2s;
}
/* 創建動畫 */
@keyframes animate {
0% {width: 50%; height: 50%;}
100% {width: 100%; height: 100%;}
}

上面的代碼中，class 為 "element" 的元素在 2 秒內從 50% 到 100% 的大小過渡。關鍵是在@keyframes中設置了動畫在 0% 和 100% 的狀態下的大小，然后瀏覽器會自動計算其它狀態。

CSS 動畫可以讓網頁更加生動有趣，不僅能夠改變元素的大小，還可以改變元素的位置、角度等。希望本文對大家有所幫助，謝謝大家閱讀！