CSS 動畫在網頁設計中是很常見的，它可以讓網頁更加動態，增加用戶體驗。但是，有時候動畫執行完之后并沒有停止，這會導致網頁性能降低、影響用戶體驗。那么，怎么讓CSS動畫執行完后自動停止呢？下面為大家介紹兩種方法。

第一種方法是使用animation-fill-mode屬性，設置動畫執行完后的狀態。animation-fill-mode屬性有四個值：none、forwards、backwards、both。其中，none表示動畫執行完后回到起始狀態，即沒有停止；forwards表示動畫執行完后停留在最后一幀的狀態，保持動畫最后的狀態；backwards表示在動畫執行前停留在第一幀的狀態，保持動畫的初始狀態；both表示同時設置forwards和backwards兩種狀態。可以根據需要選擇相應的屬性值，讓動畫在執行完后不再繼續。

.animation{
animation-name: move;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes move{
from {transform: translateX(0);}
to {transform: translateX(100px);}
}

第二種方法是使用transition屬性，讓動畫執行完后過渡到另一個狀態。transition屬性有兩個值：transition-property和transition-duration。其中，transition-property表示要過渡的屬性，例如background、color、transform等；transition-duration表示過渡時間。通過設置transition-property和transition-duration，可以讓動畫在執行完后過渡到指定狀態，停止執行。

.transition{
transition-property: transform;
transition-duration: 2s;
}
.transition:hover{
transform: translateX(100px);
}

以上兩種方法都可以讓CSS動畫執行完后停止，選擇方法要看具體需求。動畫執行完后自動停止，可以提高網頁性能，增強用戶體驗。