css中keyframes用于規(guī)定元素的動(dòng)畫動(dòng)作，是一種創(chuàng)建動(dòng)畫的css規(guī)則；keyframe規(guī)則由關(guān)鍵字“@keyframe”組成，語法為“@keyframes 動(dòng)畫名{keyframes-selector{css-styles;}}”。
本教程操作環(huán)境：windows10系統(tǒng)、css3&&html5版、dell g3電腦。
css3中keyframes的用法是什么
此屬性與animation屬性是密切相關(guān)的。
keyframes翻譯成中文，是\”關(guān)鍵幀\”的意思，如果用過flash應(yīng)該對(duì)這個(gè)比較好理解，當(dāng)然不會(huì)flash也沒有任何問題。
使用transition屬性也能夠?qū)崿F(xiàn)過渡動(dòng)畫效果，但是略顯粗糙，因?yàn)椴荒軌蚋鼮榫?xì)的控制動(dòng)畫過程，比如只能夠在指定的時(shí)間段內(nèi)總體控制某一屬性的過渡，而animation屬性則可以利用@keyframes將指定時(shí)間段內(nèi)的動(dòng)畫劃分的更為精細(xì)一些。
語法結(jié)構(gòu):
@keyframes animationname {keyframes-selector {css-styles;}}
參數(shù)解析:
animationname:聲明動(dòng)畫的名稱。
keyframes-selector:用來劃分動(dòng)畫的時(shí)長(zhǎng)，可以使用百分比形式，也可以使用 \”from\” 和 \”to\”的形式。\”from\” 和 \”to\”的形式等價(jià)于 0% %u548c 100%%u3002建議始終使用百分比形式。
示例如下：
<!doctype html><html lang=\”en\”><head> <meta charset=\”utf-8\”> <meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”> <meta http-equiv=\”x-ua-compatible\” content=\”ie=edge\”> <title>document</title> <style> div{ width:100px; height:100px; background-color:pink; animation:fadenum 5s infinite; } @keyframes fadenum{ 100%{transform:rotate(360deg);}} </style></head><body> <div></div></body></html>
輸出結(jié)果：
大家感興趣的話，可以繼續(xù)訪問：css視頻教程。