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