CSS3動畫是一種基于CSS3技術的動畫效果,使網頁元素動態地顯示和移動。CSS3動畫可以輕松地實現各種動畫效果,比如旋轉、移動、縮放、淡入淡出等。
/* CSS3動畫代碼示例 */ div { animation: rotation 2s infinite linear; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
實現CSS3動畫的關鍵是使用關鍵幀(Keyframes)和動畫屬性(animation)。關鍵幀是動畫的每個階段,可在其上定義元素的樣式。動畫屬性是用于控制動畫的行為和效果。
除了動畫效果,CSS3還支持過渡(transition)效果。過渡效果是元素從一種樣式過渡到另一種樣式的平滑過程,比如當鼠標懸停在元素上時,它會產生一個過渡效果。
/* CSS3過渡代碼示例 */ div { transition: all 1s ease; } div:hover { transform: scale(1.2); }
在CSS3中,過渡和動畫可以結合使用,創建出更多更獨特的效果和動畫。這些特性也可以使用JavaScript和jQuery進行控制和操作。