CSS3是當前前端工程師必備的技能之一，而利用CSS3制作動畫是CSS3中的重點應用之一。下面就為大家介紹如何利用CSS3制作動畫。

1. CSS3的transition過渡效果

/* 基本格式 */
transition: property duration timing-function delay;
/* property: 指定要過渡的CSS屬性名 */
/* duration: 指定過渡時間 */
/* timing-function: 過渡時間函數 */
/* delay: 過渡延遲時間 */
/* 示例 */
div {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: #ff0000;
transition: width 2s ease-in-out 1s;
}
div:hover {
width: 200px;
}

以上CSS3代碼中，div元素的width屬性在鼠標懸停時會從100px過渡到200px，過渡時間為2秒，過渡時間函數為ease-in-out，過渡延遲時間為1秒。

2. CSS3的animation動畫

/* 基本格式 */
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
/* name: 指定動畫名稱 */
/* duration: 指定動畫播放時間 */
/* timing-function: 指定動畫時間函數 */
/* delay: 指定動畫延遲播放時間 */
/* iteration-count: 指定動畫播放次數 */
/* direction: 指定動畫播放方向 */
/* fill-mode: 指定動畫播放結束后的狀態 */
/* play-state: 指定動畫播放狀態 */
/* 示例 */
@keyframes myanimation {
from {
left: 0px;
}
to {
left: 200px;
}
}
div {
position: absolute;
top: 50%;
left: 0px;
width: 100px;
height: 100px;
background-color: #ff0000;
animation: myanimation 2s ease-in-out 1s infinite alternate both running;
}

以上CSS3代碼中，定義了一個名為myanimation的動畫，從left: 0px到left: 200px。然后，將動畫應用到div元素上，播放時間為2秒，時間函數為ease-in-out，延遲播放時間為1秒，播放次數為無限，播放方向為交替播放，播放結束后狀態為保留動畫結束狀態，播放狀態為運行狀態。

總的來說，CSS3的transition過渡效果和animation動畫都是制作網頁動畫效果的好工具。你可以根據自己的需要和創造力，使用CSS3制作出更華麗的動畫效果。