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

效果如下：

以上关于46. CSS3 Keyframes介绍的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。