CSS動畫可以給網頁增添生動和活力，提高用戶的體驗感。動畫結束后，我們想要一些方式來讓用戶知道動畫已經完成。在本文中，我們將討論如何向用戶展示CSS動畫結束的放映。

有多種方法可以展示動畫結束，這些方法可以應用于不同類型的動畫。下面是一些常見的方式：使用回調函數、偽元素、CSS變量和JavaScript。

// 使用回調函數
element.addEventListener('animationend', function() {
alert('動畫已結束');
});
// 使用CSS偽元素
.element:after {
content: "動畫已結束";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
animation: fade-in 0.5s forwards;
}
@keyframes fade-in {
100% { opacity: 1; }
}
// 使用CSS變量
.element {
--animation-end-notification: "動畫已結束";
animation: slide-in 1s forwards;
}
.element::after {
content: var(--animation-end-notification);
position: absolute;
top: -50px;
right: 10%;
color: red;
}
// 使用JavaScript
setTimeout(function() {
alert('動畫已結束');
}, 1000);

使用回調函數的方式，當動畫結束時會觸發一個函數，在函數內部可以執行自己想要的操作。使用偽元素的方式，"動畫已結束"會在動畫的最后出現在指定的位置上。CSS變量表示了一個消息，當動畫結束時，"動畫已結束"將會作為偽元素內容出現。使用JavaScript的方式，動畫結束后一秒鐘，會彈出一個消息告訴用戶動畫已經結束。

這些展示動畫結束的方式只是其中的一些常見選擇，具體的實現方式可以因動畫類型、網頁設計和目標用戶而異。你可以根據自己的需求自由地選擇。