一、介紹

keyframes被稱為關(guān)鍵幀，其類似于Flash中的關(guān)鍵幀。在CSS3中其主要以“@keyframes”開(kāi)頭，后面跟著是動(dòng)畫名稱加上一對(duì)花括號(hào)“{…}”，括號(hào)中是一些不同時(shí)間段樣式規(guī)則。

語(yǔ)法：@keyframes animationname {keyframes-selector{css-styles;}}

在@keyframes中定義動(dòng)畫名稱時(shí)，其中0%和100%還可以使用關(guān)鍵詞from和to來(lái)代表，其中0%對(duì)應(yīng)的是from，100%對(duì)應(yīng)的是to。

在一個(gè)“@keyframes”中的樣式規(guī)則可以由多個(gè)百分比構(gòu)成的，如在“0%”到“100%”之間創(chuàng)建更多個(gè)百分比，分別給每個(gè)百分比中給需要有動(dòng)畫效果的元素加上不同的樣式，從而達(dá)到

一種在不斷變化的效果。

舉個(gè)栗子：

@keyframes changecolor{0%{background: red;}20%{background:blue;}40%{background:orange;}60%{background:green;}80%{background:yellow;}100%{background: red;} } div {width: 150px;height: 100px;background: red;color:#fff;margin: 20px auto; } div:hover {animation: changecolor 5s ease-out .2s; }

?

---

?

二 調(diào)用動(dòng)畫

animation-name屬性主要是用來(lái)調(diào)用?@keyframes?定義好的動(dòng)畫。需要特別注意: animation-name 調(diào)用的動(dòng)畫名需要和“@keyframes”定義的動(dòng)畫名稱完全一致（區(qū)分大

小寫），如果不一致將不具有任何動(dòng)畫效果。

注意：需要在 Chrome 和 Safari 上面的基礎(chǔ)上加上-webkit-前綴，Firefox加上-moz-。　

/* 注意translate變化的坐標(biāo)位置 四個(gè)角順時(shí)針的坐標(biāo)(0,0) (100,0) (100,100) (0,100) 因?yàn)閳A半徑為10 所以圓運(yùn)動(dòng)的坐標(biāo)點(diǎn)得在角原來(lái)的坐標(biāo)上-10pxanimation-delay設(shè)置0s,這樣動(dòng)畫就不會(huì)有延遲 */ @keyframes around{0% {transform: translate(-10px,-10px);}25%{transform: translate(90px,-10px);}50%{transform: translate(90px, 90px); }75%{transform:translate(-10px,90px);}100%{transform: translate(-10px,-10px);} } div {width: 100px;height: 100px;border: 1px solid #000;margin: 20px auto; } div span {display: inline-block;width: 20px;height: 20px;background: orange;border-radius: 100%;/*調(diào)用動(dòng)畫名*/animation-name:around;animation-duration: 10s;animation-timing-function: ease;animation-delay: 0s;/*動(dòng)畫無(wú)限循環(huán)*/animation-iteration-count:infinite; }

?

---

?

?三、設(shè)置動(dòng)畫的播放次數(shù)

animation-iteration-count屬性主要用來(lái)定義動(dòng)畫的播放次數(shù)。

語(yǔ)法：animation-iteration-count: infinite | <number>?

默認(rèn)值為1，取值為infinite時(shí)，動(dòng)畫將無(wú)限次播放

@keyframes move {0%{transform: translate(0);}15%{transform: translate(50px,80px);}30%{transform: translate(100px,0);}45%{transform: translate(150px,80px);}60%{transform:translate(200px,0);}75%{transform: translate(250px,80px);}100%{transform: translate(300px,0);} }div {width:320px;height: 100px;border: 1px solid #000;margin: 20px auto; } div span {display: inline-block;width: 20px;height: 20px;background: green;border-radius: 100%;animation-name:move;animation-duration: 10s;animation-timing-function:ease;animation-delay:.1s;animation-iteration-count:infinite; }

　　

---

?

四、設(shè)置動(dòng)畫播放方向

animation-direction屬性主要用來(lái)設(shè)置動(dòng)畫播放反向

語(yǔ)法：animation-direction:normal | alternate?

• normal是默認(rèn)值，如果設(shè)置為normal時(shí)，動(dòng)畫的每次循環(huán)都是向前播放；
• 另一個(gè)值是alternate，他的作用是，動(dòng)畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。

在上面栗子的 div span{…}加上animation-direction:alterate, 如圖

---

?

五、設(shè)置動(dòng)畫的播放狀態(tài)

animation-play-state屬性主要用來(lái)控制元素動(dòng)畫的播放狀態(tài)

有兩個(gè)參數(shù)：running， paused

其中running是其默認(rèn)值，主要作用就是類似于音樂(lè)播放器一樣，可以通過(guò)paused將正在播放的動(dòng)畫停下來(lái)，也可以通過(guò)running將暫停的動(dòng)畫重新播放，這里的重新播放不一定

是從元素動(dòng)畫的開(kāi)始播放，而是從暫停的那個(gè)位置開(kāi)始播放。另外如果暫停了動(dòng)畫的播放，元素的樣式將回到最原始設(shè)置狀態(tài)。

@keyframes move {0%{transform: translateY(40px);}15%{transform: translate(40px,40px);}30%{transform: translate(40px,80px);}45%{transform: translate(40px,40px);}60%{transform: translate(40px,0);}75%{transform: translate(40px,40px);}90%{transform: translate(80px,40px);}100%{transform: translateY(40px);} }div {width: 100px;height: 100px;border: 1px solid red;margin: 20px auto; } span {display: inline-block;width: 20px;height: 20px;background: orange;transform: translateY(90px);animation-name: move;animation-duration: 10s;animation-timing-function: ease-in;animation-delay: 0s;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:paused; } div:hover span {animation-play-state:running; }

---

?

六、設(shè)置動(dòng)畫時(shí)間外屬性

animation-fill-mode屬性定義在動(dòng)畫開(kāi)始之前和結(jié)束之后發(fā)生的操作。有四個(gè)屬性值：none | forwards | backwords |both

比如，如果想讓動(dòng)畫停在最后一幀處:animation-fill-mode:forward;

?

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

總結(jié)

以上是生活随笔為你收集整理的css3中的 @Keyframes的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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