CSS3提供了定義動畫的新方法,使用animation屬性和@keyframes關(guān)鍵字可以很好地實現(xiàn)動畫效果。
/* 定義關(guān)鍵幀 */ @keyframes myAnimation { 0% { left: 0; } 100% { left: 200px; } } /* 應(yīng)用動畫 */ div { animation-name: myAnimation; animation-duration: 2s; animation-timing-function: ease; animation-delay: 1s; animation-iteration-count: infinite; animation-direction: alternate; }
上面的代碼中,我們先定義一個名為myAnimation的關(guān)鍵幀,在0%和100%時分別設(shè)置元素的left屬性,表示元素從左側(cè)移動到200像素處。
然后在div元素上應(yīng)用動畫,使用animation-name屬性指定要應(yīng)用的關(guān)鍵幀,animation-duration屬性指定動畫的持續(xù)時間(2秒),animation-timing-function屬性指定動畫速度曲線(這里使用ease函數(shù)),animation-delay屬性指定動畫延遲1秒開始,animation-iteration-count屬性指定動畫執(zhí)行次數(shù)(這里為無限循環(huán)),animation-direction屬性指定動畫執(zhí)行方向(這里為交替反向)。
除了以上屬性,CSS3還提供了animation-fill-mode屬性用于設(shè)置動畫執(zhí)行前后的元素狀態(tài),以及animation-play-state屬性用于控制動畫的播放狀態(tài)。
總之,定義動畫可以通過定義關(guān)鍵幀和使用animation屬性來實現(xiàn),通過控制各種屬性的值可以精確地控制動畫效果。