CSS3 動畫元素是 CSS3 中的重要特性之一,通過動畫元素,開發者可以使用 CSS3 編寫各種動畫效果,比如平移、旋轉、縮放等等。這篇文章將為大家介紹如何使用 CSS3 動畫元素來創建動畫效果。
/* 創建平移動畫 */ .box { position: relative; animation: slidein 3s ease-out; } @keyframes slidein { from { left: -100%; } to { left: 0%; } } /* 創建旋轉動畫 */ .box { position: relative; animation: rotate 3s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 創建縮放動畫 */ .box { position: relative; animation: scale 3s ease-in-out; } @keyframes scale { from { transform: scale(1); } to { transform: scale(2); } }
代碼中,我們使用了關鍵幀 @keyframes 規則來創建動畫。通過設置 from 和 to 兩個關鍵幀的屬性值,我們就可以控制元素從起始狀態到結束狀態的動畫過程。
以上就是使用 CSS3 動畫元素創建動畫效果的方法。當然,你也可以通過其他 CSS 屬性來更加豐富動畫效果,比如 opacity、color、border 等等。希望這篇文章可以幫助大家更深入的了解 CSS3 動畫元素的使用。