CSS動畫是一種常見的網頁效果，它可以使網頁看起來更加生動。而回調函數就是在動畫完成后自動執行的函數。

/* 基本的CSS動畫 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.example {
animation: example 2s; 
}
/* 回調函數 */
.example {
animation: example 2s;
}
.example:last-child {
animation-delay: 2s; /* 在上一個動畫執行完成后再執行 */
}
.example:first-child {
animation-fill-mode: forwards; /* 保留動畫完成后的狀態 */
}
.example:last-child:hover {
animation-play-state: paused; /* 動畫暫停 */
}
.example:last-child:after {
content: "動畫完成后執行這個回調函數";
animation: callback 0s 4s;
}
@keyframes callback {
to {opacity: 1;}
}

上面的代碼中，我們定義了一個基本的CSS動畫和一個回調函數。回調函數會在動畫完成后執行，這個例子中設置了一個延遲時間為4秒，所以動畫完成后等待4秒后才會執行回調函數。

同時，我們使用animation-fill-mode屬性來保留動畫完成后的狀態，并且通過animation-delay屬性來控制回調函數的執行時間。此外，我們還定義了在鼠標懸停時暫停動畫的效果。

總之，回調函數是CSS動畫中一個非常重要的概念，它可以讓我們在動畫完成后自動執行一些操作，從而使網頁看起來更加生動。