CSS在畫布上設置動畫是一項非常有趣的技能。通過CSS，我們可以為畫布上的元素增加動態效果，成為網頁設計的亮點。以下是一些常用的方法：

/* 1. 使用transition屬性 */
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}
.box:hover {
width: 200px;
}
/* 2. 使用animation屬性 */
.box {
width: 100px;
height: 100px;
position: relative;
}
.box:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 20px;
left: 20px;
border-radius: 50%;
background-color: blue;
animation: bounce 1s infinite;
}
@keyframes bounce {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 20px);
}
}

以上代碼展示了兩種常用的設置動畫的方法。第一種方法使用transition屬性，可以實現簡單的過渡動畫，當鼠標移入時元素寬度從100px過渡到200px。第二種方法使用animation屬性，通過在:before偽元素中增加動畫效果，實現了小球的彈跳效果。我們可以發現，在使用animation屬性時需要定義關鍵幀@keyframes。

總的來說，CSS在畫布上設置動畫是一項非常有意思的技能。我們可以用它來制作各種有趣的效果，提高網頁設計的質量。需要注意，CSS動畫的實現需要耐心和技巧，并且對HTML和CSS基礎有一定的掌握。