CSS動畫是網頁設計中常用的技術之一。很多時候，我們需要在動畫結束后禁止重復播放，以提高用戶體驗。下面我們將介紹一些實現方法。

方法一：使用animationend事件

/* CSS */
.animation {
animation: myanimation 3s;
}
/* JavaScript */
var animation = document.querySelector('.animation');
animation.addEventListener('animationend', function() {
animation.style.animation = 'none';
});

上述代碼中，.animation元素的動畫時長為3秒。使用addEventListener()方法添加animationend事件監聽器，一旦動畫結束，就將animation屬性設置為'none'，即禁止重復播放。

方法二：使用animation-fill-mode屬性

/* CSS */
.animation {
animation: myanimation 3s;
animation-fill-mode: forwards;
}

上述代碼中，我們添加了animation-fill-mode屬性，并將其值設置為forwards。它的作用是在動畫結束后，將元素的狀態保持為動畫完成后的狀態，即不重復播放動畫。

方法三：使用transition動畫

/* CSS */
.animation {
transition: opacity 2s;
opacity: 1;
}
.animation.hide {
opacity: 0;
}
/* JavaScript */
var animation = document.querySelector('.animation');
animation.addEventListener('transitionend', function() {
animation.classList.remove('hide');
});

上述代碼中，我們使用了transition動畫，并在animation.hide樣式中設置了元素的透明度為0。一旦動畫結束，我們使用transitionend事件監聽器，將元素的hide類移除，以便下一次動畫播放。

以上就是關于CSS動畫結束后不重復的幾種實現方法。如有需要，可以根據具體情況選擇適合的方法。