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

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}

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

經(jīng)驗與技巧：在@keyframes中定義動畫名稱時，其中0%和100%還可以使用關(guān)鍵詞from和to來代表，其中0%對應(yīng)的是from，100%對應(yīng)的是to。

瀏覽器的支持情況：

Chrome 和 Safari 需要前綴 -webkit-；Foxfire 需要前綴 -moz-。

案例演示

通過“@keyframes”聲明一個名叫“wobble”的動畫，從“0%”開始到“100%”結(jié)束，同時還經(jīng)歷了一個“40%”和“60%”兩個過程。“wobble”動畫在“0%”時元素定位到left為100px，背景色為green，然后在“40%”時元素過渡到left為150px,背景色為orange,接著在“60%”時元素過渡到left為75px，背景色為blue，最后“100%”時結(jié)束動畫，元素又回到起點left為100px處，背景色變?yōu)閞ed。

HTML:

<div>鼠標(biāo)放到我身上</div>

CSS:

@keyframes wobble {
  0% {
    margin-left: 100px;
    background:green;
  }
  40% {
    margin-left:150px;
    background:orange;
  }
  60% {
    margin-left: 75px;
    background: blue;
  }
  100% {
    margin-left: 100px;
    background: red;
  }
}
div {
  width: 100px;
  height: 100px;
  background:red;
  color: #fff;
}
div:hover{
  animation: wobble 5s ease .1s;
}