幀動畫是一種網頁動畫效果,它是通過不斷地切換多張圖片來制作動畫的。CSS中的幀動畫可以使用關鍵幀(@keyframes)來定義動畫每一幀的樣式,同時也可以設置動畫的持續時間、循環次數、緩動效果等。
@keyframes myAnimation { 0% { opacity: 0; } 25% { opacity: 1; transform: rotate(45deg); } 50% { opacity: 1; transform: rotate(90deg); } 75% { opacity: 1; transform: rotate(135deg); } 100% { opacity: 0; transform: rotate(180deg); } } .animation { animation-name: myAnimation; animation-duration: 2s; animation-fill-mode: forwards; }
上面的代碼定義了一個名為myAnimation的動畫,首先設置了0%的透明度,然后在25%、50%、75%和100%分別設置了不同的旋轉角度和透明度,從而創造出一個具有變形效果的動畫。而animation屬性則將動畫應用于一個class為animation的元素,設置了動畫的名稱、持續時間和完成后的填充方式。
幀動畫可以產生非常豐富的視覺效果,但需要注意的是,過多的幀動畫會對網頁性能產生較大的影響,因此在制作幀動畫時要注意減少幀數和尺寸,優化性能。