本篇文章給大家帶來關于css中動畫的相關知識，其中包括什么是動畫，動畫的調用以及多關鍵幀動畫應該怎樣實現，希望對你有幫助。
1.?什么是動畫
在 css 中，可以使用@keyframes來定義動畫
（keyframes 表示“關鍵幀”）
大致結構：
@keyframes rotation { /* rotation 動畫名 */ from { /* 起始狀態 */ transform: rotate(0); } to { /* 結束狀態 */ transform: rotate(360deg); }}
2.?動畫的調用
定義動畫之后，可以使用 animation 屬性調用動畫。
animation基本屬性：
name: 動畫的名字 (初始默認值 none)duration: 動畫時長 (初始默認值 0s)timing function：變化速度曲線 (初始默認值 ease)delay: 延遲時間（動畫經過多少時間才開始） (初始默認值 0s)iteration-count: 動畫執行次數 (初始默認值 1，如果想動畫永遠執行，寫 infinite)animation: name | duration | timing function | delay | iteration-count;
除此之外，還有一些屬性：
animation-direction(設置是否輪流反向播放動畫)
normal: 以正常的方式播放動畫（初始默認值）reverse: 以相反的方式播放動畫alternate: 讓動畫的第 2、4、6…(偶數次)自動逆向執行alternate-reverse: 讓動畫的奇數次自動逆向執行
animation-fill-mode(設置當動畫不播放時動畫的狀態)
none: 不改變動畫的默認行為forwards: 讓動畫停止在最后結束狀態backwards: 在 animation-delay 所指定的時間段內，應用動畫第一個關鍵幀中的樣式both: 同時遵循 forwards 和 backwards 的規則
animation-play-state(設置動畫是播放還是暫停)
paused: 暫停動畫的播放running: 正常播放動畫
3.? 多關鍵幀動畫
對于想要實現多種效果的動畫，這個時候就可以使用多關鍵幀。
大致結構：
@keyframes changecolor {0% {background-color: red;}20% {background-color: orange;}40% {background-color: blue;}100% {background-color: green;}}
（學習視頻分享：css視頻教程）

購買的時候提示又實際有沒有
去哪里租用云服務器
高科技時代 模板建站的路在何方
電腦不能識別usb是怎么回事?解決電腦不能識別usb的方法詳情
上傳不了域名證書麻煩后臺上傳下
阿里云服務器跳過備案
Linux 服務器上用 IPTables 啟用和禁用 Ping --ICMP 回聲請求--
多臺電腦都打不開網站手機使用移動網絡有時偶爾能打開主頁