CSS3動畫可以輕松地為網站增加互動性和娛樂性,但是一個煩人的問題是,在CSS3動畫結束時,它常常會自動重復播放或從頭開始,而不是停止。因此,在本文中,我們將討論如何在CSS3動畫播放結束后停止它。
.animate { animation-name: myAnimation; animation-duration: 2s; animation-fill-mode: forwards; } @keyframes myAnimation { from {background-color: red;} to {background-color: blue;} }
如上代碼中,我們定義一個名為“animate”的類,其中包含CSS3動畫。animation-name指定動畫的名稱,“myAnimation”是針對其關鍵幀設置的名稱。animation-duration指定動畫的持續時間。animation-fill-mode指定動畫完成后的行為,并將其設置為“forwards”,表示在動畫完成時停留在最終狀態。
通過這樣設置,當動畫完成時,它將停留在最終狀態,而不會重新開始。這是解決自動重復播放或自動重復開始的問題的最簡單和最有效的方法。
總之,在使用CSS3動畫時,確保在動畫完成后將其停止,可以使您的網站更加專業和出色。