CSS3 Keyframes介紹

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

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

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

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

瀏覽器的支持情況：Chrome 和 Safari 需要前綴 -webkit-；Foxfire 需要前綴 -moz-。

圖片11.png

案例演示：通過“@keyframes”聲明一個名叫“wobble”的動畫，從“0%”開始到“100%”結束，同時還經歷了一個“40%”和“60%”兩個過程。“wobble”動畫在“0%”時元素定位到left爲100px，背景色爲green，然後在“40%”時元素過渡到left爲150px,背景色爲orange,接著在“60%”時元素過渡到left爲75px，背景色爲blue，最後“100%”時結束動畫，元素又回到起點left爲100px處，背景色變爲red。

HTML:

<div>滑鼠放到我身上</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;
}