CSS動畫是一種非常實用的技術，可以帶來令人驚嘆的視覺效果，有時候我們可能希望動畫只執(zhí)行一次，而不是循環(huán)播放，CSS動畫怎么只執(zhí)行一次呢？

我們可以通過設置animation-iteration-count屬性來控制動畫的執(zhí)行次數，這個屬性接受一個整數值，表示動畫應該播放的次數，如果我們希望動畫只執(zhí)行一次，可以將animation-iteration-count設置為1。

我們還可以使用animation-fill-mode屬性來控制動畫在播放前后的狀態(tài)，這個屬性有以下幾個值：forwards、backwards、both和initial，如果我們希望動畫在播放后保持結束時的狀態(tài)，可以將animation-fill-mode設置為forwards。

我們還可以結合使用這兩個屬性來實現(xiàn)只執(zhí)行一次的CSS動畫，以下是一個示例代碼：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myAnimation 2s forwards;
}
@keyframes myAnimation {
  from { left: 0; }
  to { left: 100px; }
}

在這個示例中，我們定義了一個名為myAnimation的CSS動畫，它將在2秒內將div元素從左側移動到右側，我們將animation-fill-mode設置為forwards，這意味著動畫在播放后將保持結束時的狀態(tài)，即div元素將保持在右側。

通過控制animation-iteration-count和animation-fill-mode屬性，我們可以輕松地實現(xiàn)只執(zhí)行一次的CSS動畫。