css3中的 @Keyframes

标签：

一、介绍

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

css3中的 @Keyframes

标签：

原文地址：http://www.cnblogs.com/afighter/p/5732710.html