CSS3動畫是目前最流行的動畫效果之一，它可以通過簡單的代碼實現各種各樣的效果，比如漸變、旋轉、縮放、翻轉等。然而，當動畫效果完成后，通常默認情況下會立即停止并返回到初始狀態。這對于一些場景可能并不理想，比如當我們希望動畫效果停止并保持在最終狀態時。

解決這個問題的方法非常簡單，只需要使用CSS3的兩個屬性即可：

.animation {
animation-name: my-animation;
animation-duration: 2s;
/* 在動畫完成后保持狀態 */
animation-fill-mode: forwards;
/* 在動畫完成后回到初始狀態 */
animation-fill-mode: backwards;
}

animation-fill-mode屬性可以設置為forwards或backwards：

• forwards：動畫完成后保持在最終狀態。
• backwards：動畫完成后回到初始狀態。

如果想要同時實現兩個效果，可以使用animation-fill-mode：both屬性：

.animation {
animation-name: my-animation;
animation-duration: 2s;
/* 在動畫完成后保持狀態 */
animation-fill-mode: forwards;
/* 在動畫開始前回到初始狀態 */
animation-direction: reverse;
}

animation-direction屬性可以設置為reverse，表示在動畫開始前回到初始狀態。

CSS3動畫停止保持很簡單，只需要添加一個簡單的屬性即可。這不僅可以為我們的網頁增加更多的動態效果，同時也為我們提供了更多的自由控制CSS動畫的方法。