CSS3動畫是CSS的一種模塊,可以在網頁中實現各種各樣的動畫效果,比如移動、旋轉、縮放、透明度等等,而且可以控制動畫的速度、次數、方向等。它以代碼的方式定義動畫,而不是通過圖片、Flash等其他方式實現。
要定義CSS3動畫,需要使用CSS的@keyframes規則。@keyframes規則包含了一系列的樣式,每一幀(即動畫的每一個狀態)都有自己的樣式,從而實現一系列復雜的動態效果。下面是一個簡單的例子:
/* 定義@keyframes */ @keyframes example { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } /* 應用動畫 */ div { animation: example 2s infinite; }
上面的代碼中,首先定義了一個@keyframes規則,名為example。在這個規則中,定義了3個關鍵幀,即動畫的3個不同狀態。第一個關鍵幀(0%)表示動畫的初始狀態,第二個關鍵幀(50%)表示動畫的中間狀態,第三個關鍵幀(100%)表示動畫的最終狀態。每個關鍵幀中都指定一個transform樣式,通過改變transform的值,實現了元素的縮放效果。
接著,在div元素上應用了example動畫,使得元素在2秒鐘內不停的執行這個動畫(infinite),即實現了元素的持續縮放效果。
除了transform之外,@keyframes規則還可以定義其他樣式,如opacity(透明度)、color(顏色)、background(背景)等等,從而實現更多更豐富的動畫效果。