CSS3 動畫是網頁設計中非常重要的一部分,它可以讓網頁更加生動、活潑,增加用戶的體驗。但是默認情況下,CSS3 動畫只會播放一次,無法連續不斷地循環播放。那么,如何實現 CSS3 動畫一直播放呢?
/* CSS3 動畫的定義 */ @-webkit-keyframes my-animation { /* Safari 和 Chrome */ 0% { /* 動畫開始時的樣式 */ } 100% { /* 動畫結束時的樣式 */ } } @keyframes my-animation { /* 其他瀏覽器 */ 0% { /* 動畫開始時的樣式 */ } 100% { /* 動畫結束時的樣式 */ } } /* 元素應用動畫 */ .element { -webkit-animation: my-animation 2s infinite; /* Safari 和 Chrome */ animation: my-animation 2s infinite; /* 其他瀏覽器 */ }
代碼解釋:
在樣式表中定義一個名為“my-animation”的動畫,包括開始和結束兩個狀態。在要應用動畫的元素中,通過“animation”屬性指定要播放的動畫名稱(“my-animation”)、播放時間(2秒)和播放次數(infinite,表示無限次播放)。