CSS循環一次的代碼

@keyframes spin-once {
to { transform: rotate(360deg); }
}
.example {
animation: spin-once 2s linear;
animation-iteration-count: 1; /* 僅循環一次 */
}

CSS的循環動畫是非常有用的特性，它可以一直循環下去，直到用戶進行了某種操作才停止。不過，在某些情況下，我們可能只需要循環一次動畫，然后停止。

上述代碼展示了如何使用CSS來實現循環一次的動畫。關鍵點在于，我們需要在animation-iteration-count屬性中指定"1"，從而告訴瀏覽器我們只需要循環一次。

以上代碼使用了關鍵幀（@keyframes）來定義動畫的開始和結束狀態，其中通過transform屬性將元素旋轉360度。接著，我們將該動畫應用到例子類（.example）中，并在animation屬性中指定了動畫的名稱和執行時間等參數。

總之，CSS循環動畫是一種非常有用的特性，它可以為我們的網頁增加生動的效果。如何實現循環一次的動畫，在animation-iteration-count屬性中指定"1"即可。希望大家可以發揮自己的想象力，將CSS動畫運用到更為邊緣的領域。