CSS動畫是一個非常有趣的功能，可以為網頁添加更豐富的交互體驗。定義動畫名稱可以幫助我們更方便的管理動畫，讓代碼更易讀。

/* 定義動畫名稱 */
@keyframes slide-in {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
/* 應用動畫 */
.box {
animation-name: slide-in;
animation-duration: 1s;
animation-timing-function: ease-out;
}

如上代碼中，我們使用@keyframes定義了一個名為slide-in的動畫，該動畫從左側-100%處移動至正常位置0，以此形成一個從左側滑動的效果。然后在.box選擇器中通過animation-name屬性，將該動畫應用于.box元素中。我們還可以通過animation-duration和animation-timing-function屬性調整動畫的播放時間和速度曲線。

這樣做不僅讓我們在編寫、修改時更容易識別動畫名稱，也可以避免命名沖突。另外，在開發比較大型的項目時，最好將動畫定義集中在某個文件中，方便全局管理。