46. 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-。

案例演示

通过@keyframes声明一个名叫 changecolor 的动画，从“0%”开始到“100%”结束，同时还经历了一个“40%”和“60%”两个过程。“changecolor”动画在“0%”时，背景色为 green，然后在“40%”时，背景色为 orange,接着在“60%”时，背景色为 blue，最后“100%”时结束动画，元素又回到起点处，背景色变为 red。

HTML 代码:

<div>鼠标放到我身上</div>

CSS 代码:

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

效果如下：