CSS3 Animation 是 CSS3 中新增的一種動畫效果,比之前的純 CSS 動畫更加豐富和復雜,提供了更多的動畫屬性和方法。以下是一些 CSS3 Animation 實例:
/* 整個 div 從上往下掉落 */ div{ animation: drop 2s; } @keyframes drop { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); } }
上方代碼通過 animation 屬性綁定了一個名為 drop 的關鍵幀動畫,使整個 div 元素從上往下掉落,掉落時間為 2s。在 keyframes 中定義了具體的動畫效果,從上往下移動一個整個頁面高度。
/* 圖片旋轉 */ img{ animation: rotate 3s infinite linear; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
上方代碼通過 animation 屬性綁定了一個名為 rotate 的關鍵幀動畫,使圖片元素在 3s 中無限次旋轉。在 keyframes 中定義了具體的動畫效果,從 0% 到 100% 的時間內將圖片元素從 0deg 旋轉到 360deg。
/* 文字縮放 */ h1{ animation: scale 1s ease-out; } @keyframes scale { 0% { transform: scale(2); } 100% { transform: scale(1); } }
上方代碼通過 animation 屬性綁定了一個名為 scale 的關鍵幀動畫,使標題元素在 1s 中縮小到原大小。在 keyframes 中定義了具體的動畫效果,從 0% 到 100% 的時間內將標題元素從原來的大小縮小到一半的大小。
以上就是一些 CSS3 Animation 實例,通過使用關鍵幀動畫可以實現更加復雜的動畫效果,讓網頁更加生動有趣。