css 動(dòng)畫：

動(dòng)畫是CSS3中具有顛覆性的特征之一，可通過設(shè)置多個(gè)節(jié)點(diǎn)來精確控制一個(gè)或一組動(dòng)畫，常用來實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果.

必要元素：

a、通過@keyframes指定動(dòng)畫序列；自動(dòng)補(bǔ)間動(dòng)畫，確定兩個(gè)點(diǎn)，系統(tǒng)會(huì)自動(dòng)計(jì)算中間過程。這兩個(gè)點(diǎn)就稱為關(guān)鍵幀。我們可以設(shè)置多個(gè)關(guān)鍵幀

?b、通過百分比將動(dòng)畫序列分割成多個(gè)節(jié)點(diǎn)；

?c、在各節(jié)點(diǎn)中分別定義各屬性

?d、通過animation將動(dòng)畫應(yīng)用于相應(yīng)元素；

animation樣式常用屬性：

a)?????動(dòng)畫序列的名稱:animation-name: move;

b)?????動(dòng)畫的持續(xù)時(shí)間:animation-duration: 1s;

c)????? 動(dòng)畫的延時(shí):animation-delay: 1s;

d)????播放狀態(tài):animation-play-state: paused|running;

e)???? 播放速度:animation-timing-function: linear;

f)????? 播放次數(shù) 反復(fù):animation-iteration-count: 1;

g)???? 動(dòng)畫播放完結(jié)后的狀態(tài):animation-fill-mode: forwards;

h)???? 循環(huán)播放時(shí)，交叉動(dòng)畫:animation-direction: alternate;

代碼說明：

<style>*{padding: 0;margin: 0;}div{width: 300px;height: 300px;margin:100px auto;}div > img{width:100%;}/*添加動(dòng)畫*/@keyframes rotateAni {0%{/*可以同時(shí)對多個(gè)屬性添加動(dòng)畫效果*/transform: rotate(0deg) scale(1);}50%{transform: rotate(180deg) scale(2);}100%{transform: rotate(360deg) scale(1);}}div:hover > img{/*動(dòng)畫名稱-自定義*/animation-name: rotateAni;/*動(dòng)畫時(shí)間*/animation-duration: 1s;/*動(dòng)畫速率曲線： linear：勻速 ease：動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢 ease-in：動(dòng)畫以低速開始 ease-out：動(dòng)畫以低速結(jié)束 ease-in-out：動(dòng)畫以低速開始和結(jié)束*/animation-timing-function: linear;/*動(dòng)畫播放次數(shù)*/animation-iteration-count: 4;/*動(dòng)畫時(shí)間延遲*/animation-delay: 0s;/*動(dòng)畫播放完的狀態(tài)： forwards:保持動(dòng)畫播放完畢后的狀態(tài) backwards:退回到原始狀態(tài)(默認(rèn)值)*/animation-fill-mode: forwards;/*動(dòng)畫是否輪流反射播放： alternate:在規(guī)定的次數(shù)內(nèi)輪流反射播放 normal:正常播放*//*animation-direction: alternate;*/}div:active >img{/*動(dòng)畫的當(dāng)前播放狀態(tài)： paused：暫停 running:運(yùn)行*/animation-play-state: paused;}</style>

?

轉(zhuǎn)載于:https://www.cnblogs.com/bbc66/p/9434234.html

總結(jié)

以上是生活随笔為你收集整理的css animation动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。