@keyframes rotation { /* rotation 動(dòng)畫(huà)名 */ from { /* 起始狀態(tài) */ transform: rotate(0); } to { /* 結(jié)束狀態(tài) */ transform: rotate(360deg); }}
name: 動(dòng)畫(huà)的名字 (初始默認(rèn)值 none)duration: 動(dòng)畫(huà)時(shí)長(zhǎng) (初始默認(rèn)值 0s)timing function：變化速度曲線 (初始默認(rèn)值 ease)delay: 延遲時(shí)間（動(dòng)畫(huà)經(jīng)過(guò)多少時(shí)間才開(kāi)始） (初始默認(rèn)值 0s)iteration-count: 動(dòng)畫(huà)執(zhí)行次數(shù) (初始默認(rèn)值 1，如果想動(dòng)畫(huà)永遠(yuǎn)執(zhí)行，寫(xiě) infinite)animation: name | duration | timing function | delay | iteration-count;
normal: 以正常的方式播放動(dòng)畫(huà)（初始默認(rèn)值）reverse: 以相反的方式播放動(dòng)畫(huà)alternate: 讓動(dòng)畫(huà)的第 2、4、6…(偶數(shù)次)自動(dòng)逆向執(zhí)行alternate-reverse: 讓動(dòng)畫(huà)的奇數(shù)次自動(dòng)逆向執(zhí)行
none: 不改變動(dòng)畫(huà)的默認(rèn)行為forwards: 讓動(dòng)畫(huà)停止在最后結(jié)束狀態(tài)backwards: 在 animation-delay 所指定的時(shí)間段內(nèi)，應(yīng)用動(dòng)畫(huà)第一個(gè)關(guān)鍵幀中的樣式both: 同時(shí)遵循 forwards 和 backwards 的規(guī)則
@keyframes changeColor {0% {background-color: red;}20% {background-color: orange;}40% {background-color: blue;}100% {background-color: green;}}
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享網(wǎng)絡(luò)內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-62778877-8306；郵箱：fanjiao@west.cn。本站原創(chuàng)內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明出處：
西部數(shù)碼知識(shí)庫(kù) »
怎么玩轉(zhuǎn)css動(dòng)畫(huà)？（整理分享）