CSS自定義動畫是一種能夠讓網頁元素動態變化的技術，可以通過定義關鍵幀和屬性來實現多種動畫效果。

/* 定義動畫名稱、持續時間和關鍵幀 */
@keyframes my-animation {
from {
opacity: 0;
transform: translateX(-100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* 給元素應用動畫 */
.element {
animation-name: my-animation;
animation-duration: 2s;
}

上述代碼定義了一個名為“my-animation”的動畫，持續時間為2秒，關鍵幀為“from”和“to”。從“from”到“to”的過程中，元素的透明度從0變為1，同時沿X軸從左側進入視圖。

通過給元素添加“animation-name”和“animation-duration”的CSS屬性，就可以應用定義好的動畫效果。還可以使用“animation-delay”和“animation-iteration-count”等屬性調整動畫的延遲和重復次數。

/* 調整動畫延遲和重復次數 */
.element {
animation-delay: 1s;
animation-iteration-count: infinite;
}

在實際應用中，可以用CSS自定義動畫來實現各種效果，如平滑的過渡、漸隱漸現、按需加載等。與JavaScript相比，CSS自定義動畫更輕量級、性能更好，并且可以使用硬件加速等優化技術來提升動畫效果。