CSS3動畫keyframe是指一種可以創(chuàng)建動態(tài)動畫效果的CSS屬性。通過對keyframe屬性的使用,可以在網(wǎng)頁中實現(xiàn)各種各樣的動畫效果,比如旋轉(zhuǎn)、變色、淡出等效果。
/* 定義關(guān)鍵幀,動畫從正常大小變成2倍大小 */ @keyframes myAnimation { from { transform: scale(1); } to { transform: scale(2); } } /* 使用關(guān)鍵幀,在2秒內(nèi)執(zhí)行變化 */ .my-element { animation: myAnimation 2s; }
其中,@keyframes是一個關(guān)鍵字,用來定義動畫的起始狀態(tài)和終止?fàn)顟B(tài)。通過使用from關(guān)鍵字和to關(guān)鍵字來定義動畫的起止?fàn)顟B(tài)。通過transform屬性來對元素進行縮放、旋轉(zhuǎn)等變形操作。
在使用動畫時,需要為元素添加animation屬性。animation屬性包括動畫名稱、持續(xù)時間、速度曲線等屬性。通過將這些屬性與關(guān)鍵幀設(shè)置結(jié)合起來,即可實現(xiàn)自己所需要的動畫效果。
/* 定義關(guān)鍵幀,動畫從正常顏色變成紅色 */ @keyframes colorChange { from { background-color: #fff; } to { background-color: #f00; } } /* 使用關(guān)鍵幀,在1秒內(nèi)執(zhí)行變化 */ .my-element { animation: colorChange 1s ease-in-out; }
總之,CSS3動畫keyframe的用法非常靈活,可以根據(jù)實際需要進行各種組合。需要注意的是,過多的動畫效果會影響頁面性能,因此在制作動畫時一定要注意。