CSS3動畫是一種非常有趣和實用的技術，它可以讓網頁更加生動有趣、增加用戶體驗。本文將為大家介紹如何使用CSS3動畫繪制特效。

// keyframes示例
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
// 使用animation應用動畫
.box {
animation: fadeIn 1s ease-in-out forwards;
}

在CSS3中，我們可以使用@keyframes來定義動畫，其中from代表動畫開始時狀態，to代表動畫結束時狀態。在這之間，可以通過使用百分比控制動畫不同的階段，比如50%代表動畫進行到一半的時候。

定義好動畫后，使用animation屬性來應用動畫，其中第一個參數為動畫名稱，第二個參數為動畫時間，第三個參數為動畫速度曲線，第四個參數為動畫完成后的狀態，可以為forwards或者backwards。

// transform示例
.box {
transform: translate(100px, 100px) rotate(45deg);
}

另外一個常用的CSS3動畫特性是transform，它可以通過平移、旋轉、縮放、傾斜等方式，改變元素的樣式。其中translate函數可以實現平移，rotate函數可以實現旋轉。

在使用transform時，需要注意元素的坐標系。默認情況下邊界坐標系為左上角，當元素旋轉后，坐標系會跟隨旋轉方向改變。可以通過使用transform-origin來改變元素的旋轉中心，從而避免坐標系的不均衡。

總結來說，CSS3動畫可以讓網頁更加有趣、生動。通過使用@keyframes和animation、transform等CSS屬性，可以為網頁添加許多不同的動畫特效。