css3中的 @Keyframes

1、介紹

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
因此圓運動的座標點得在角原來的座標上-10px
 animation-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; 
}

 

---

 

 3、設置動畫的播放次數

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

　　

---

 

4、設置動畫播放方向

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

語法：animation-direction:normal | alternate 

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

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

---

 

5、設置動畫的播放狀態

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

---

 

6、設置動畫時間外屬性

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

好比，若是想讓動畫停在最後一幀處:animation-fill-mode:forward;