CSS角色動畫是一種允許我們創建漂亮的動畫效果的CSS技術。我們可以使用CSS屬性來動態地改變一個元素的屬性值，從而實現動畫效果。

/* 定義一個角色動畫 */
@keyframes character-animation {
from { transform: translateX(0px);}
to { transform: translateX(200px); }
}
/* 將動畫應用于一個元素 */
.element {
animation-name: character-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
}

在上面的例子中，我們定義了一個角色動畫，使用CSS的@keyframes規則。這個動畫將移動一個元素從初始位置（transform: translateX(0)）到一個新位置（transform: translateX(200px)）。

然后我們將這個動畫應用到一個元素中，使用animation-name屬性指定動畫名稱，animation-duration屬性指定動畫時長，animation-iteration-count屬性指定動畫重復次數。

我們還可以使用其他的CSS屬性來制定角色動畫，例如更改元素的寬度、高度、透明度等等。

/* 定義一個角色動畫 */
@keyframes character-animation {
from { opacity: 0; width: 50px; height: 50px; }
to { opacity: 1; width: 100px; height: 100px; }
}
/* 將動畫應用于一個元素 */
.element {
animation-name: character-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
}

在另一個例子中，我們定義了一個角色動畫，使元素從初始狀態（opacity: 0; width: 50px; height: 50px;）到新狀態（opacity: 1; width: 100px; height: 100px;）的變化。

然后我們同樣將這個動畫應用到一個元素中，使用animation-name、animation-duration、animation-iteration-count屬性來指定動畫的名稱、時長和重復次數。

CSS角色動畫是一個非常強大的技術，可以讓我們的網站看起來更加生動和有趣。當我們結合CSS3的其他技術使用時，例如CSS變形、CSS過渡和CSS過濾等等，我們可以創造出幾乎任何我們想要的動畫效果。