CSS3動畫是現代Web開發必備技能,而了解CSS3動畫相關屬性是這項技能的基礎。下面介紹一些常用的CSS3動畫相關屬性。
/*設置動畫名稱*/ animation-name: myanimation; /*設置動畫時長*/ animation-duration: 2s; /*設置動畫延遲時間*/ animation-delay: 1s; /*設置動畫播放次數*/ animation-iteration-count: 3; /*設置動畫方向*/ animation-direction: normal; /*設置動畫結束后效果*/ animation-fill-mode: forwards; /*設置動畫速率*/ animation-timing-function: ease-in-out;
上述代碼中,animation-name用于指定動畫的名稱;animation-duration用于設置動畫的時長;animation-delay用于設置動畫執行的延遲時間;animation-iteration-count用于設置動畫的播放次數;animation-direction用于設置動畫的方向;animation-fill-mode用于設置動畫執行結束后的效果;animation-timing-function用于設置動畫的速率。
這些CSS3動畫相關屬性的使用可以將靜態的網頁變得更加生動有趣,讓用戶在瀏覽網頁時獲得更加好的視覺體驗。
上一篇css span邊框
下一篇css span的間距