CSS3動畫是Web開發中非常重要的一個部分,它可以給網站添加專業、優美和生動的視覺效果。下面我們就來看看如何調用CSS3動畫。
/* 1. 首先定義一個動畫 */ @keyframes my-animation { 0% { left: 0px; top: 0px; } 50% { left: 200px; top: 100px; } 100% { left: 400px; top: 0px; } } /* 2. 接著在選擇器中調用動畫 */ .box { width: 100px; height: 100px; background-color: #F00; position: absolute; animation-name: my-animation; animation-duration: 2s; } /* 3. 如果需要重復播放,可以設置動畫次數 */ .box { animation-iteration-count: infinite; } /* 4. 如果需要讓動畫暫停或繼續,可以使用animation-play-state */ .box:hover { animation-play-state: paused; }
在上面的代碼中,我們首先定義了一個名為“my-animation”的動畫。接著,在選擇器“.box”中使用了該動畫。我們還可以設置動畫的播放次數以及在特定事件下暫停或繼續動畫播放。
總之,CSS3動畫是一種非常靈活易用且功能豐富的Web開發技術,通過該技術,我們可以輕松地為網站添加動態效果,為網站帶來更好的用戶體驗。
下一篇css3動漫特性