CSS3 Animation是CSS3中的一個模塊,它可以讓開發者創建動畫效果,使網頁更加生動和有趣。
CSS3 Animation的基本語法如下:
/* 定義動畫名稱、時間、速度曲線和重復次數 */ animation: 名稱 時間 速度曲線 重復次數; /* 定義動畫播放方式 */ animation-direction: normal | reverse | alternate | alternate-reverse; /* 定義動畫是否暫停 */ animation-play-state: running | paused; /* 定義動畫延遲播放時間 */ animation-delay: 時間; /* 定義動畫是否循環播放 */ animation-iteration-count: 數值 | infinite; /* 定義動畫播放完成后是否回到初始狀態 */ animation-fill-mode: none | forwards | backwards | both; /* 定義動畫結束后是否保持最終狀態 */ animation-fill-mode: none | forwards | backwards | both; /* 定義動畫播放的關鍵幀 */ @keyframes 名稱 { /* 定義關鍵幀樣式 */ 0% { 樣式 } 50% { 樣式 } 100% { 樣式 } }
使用CSS3 Animation時,可以通過定義關鍵幀來設置動畫效果,如下所示:
@keyframes rotate { /* 定義關鍵幀樣式 */ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 將動畫應用于元素 */ div { animation: rotate 2s linear infinite; }
以上代碼將會使元素不斷旋轉,直到頁面關閉。
CSS3 Animation的應用場景非常廣泛,可以用于網頁中的按鈕、菜單、圖片、文字等元素的動畫效果。