一、介紹

keyframes被稱為關鍵幀，其類似于Flash中的關鍵幀。在CSS3中其主要以“@keyframes”開頭，后面跟著是動畫名稱加上一對花括號“{…}”，括號中是一些不同時間段樣式規則。

語法：@keyframes animationname {keyframes-selector{css-styles;}}

在@keyframes中定義動畫名稱時，其中0%和100%還可以使用關鍵詞from和to來代表，其中0%對應的是from，100%對應的是to。

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

一種在不斷變化的效果。

舉個栗子：

@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; }

?

---

?

二 調用動畫

animation-name屬性主要是用來調用?@keyframes?定義好的動畫。需要特別注意: animation-name 調用的動畫名需要和“@keyframes”定義的動畫名稱完全一致（區分大

小寫），如果不一致將不具有任何動畫效果。

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

/* 注意translate變化的坐標位置 四個角順時針的坐標(0,0) (100,0) (100,100) (0,100) 因為圓半徑為10 所以圓運動的坐標點得在角原來的坐標上-10pxanimation-delay設置0s,這樣動畫就不會有延遲 */ @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%;/*調用動畫名*/animation-name:around;animation-duration: 10s;animation-timing-function: ease;animation-delay: 0s;/*動畫無限循環*/animation-iteration-count:infinite; }

?

---

?

?三、設置動畫的播放次數

animation-iteration-count屬性主要用來定義動畫的播放次數。

語法：animation-iteration-count: infinite | <number>?

默認值為1，取值為infinite時，動畫將無限次播放

@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; }

　　

---

?

四、設置動畫播放方向

animation-direction屬性主要用來設置動畫播放反向

語法：animation-direction:normal | alternate?

• normal是默認值，如果設置為normal時，動畫的每次循環都是向前播放；
• 另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。

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

---

?

五、設置動畫的播放狀態

animation-play-state屬性主要用來控制元素動畫的播放狀態

有兩個參數：running， paused

其中running是其默認值，主要作用就是類似于音樂播放器一樣，可以通過paused將正在播放的動畫停下來，也可以通過running將暫停的動畫重新播放，這里的重新播放不一定

是從元素動畫的開始播放，而是從暫停的那個位置開始播放。另外如果暫停了動畫的播放，元素的樣式將回到最原始設置狀態。

@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; }

---

?

六、設置動畫時間外屬性

animation-fill-mode屬性定義在動畫開始之前和結束之后發生的操作。有四個屬性值：none | forwards | backwords |both

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

?

轉載于:https://www.cnblogs.com/afighter/p/5732710.html

總結

以上是生活随笔為你收集整理的css3中的 @Keyframes的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。