css基础（九）－－keyframe

33.keyframe

关键帧，类似于flash中的关键帧，以@keyframes开头紧跟着动画名称加上花括号｛。。。｝，括号中表示不同时间段样式规则

@keyframes changecolor{

  0%{

   background: red;

  }

  100%{

    background: green;

  }

}

 

样式规则中可以创建多个百分比，分别给每个百分比中给需要有的动画效果加上样式，而达到不断变化的效果，还可以使用from和to表示（其中from表示0％，to表示100%）

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

使用方法：

使用@keyframe标记动画名称

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

  }

}

在需要变化的元素中使用animation属性

div:hover{

  animation: wobble 5s ease .1s;

}

 

调用动画：
animation－name属性用来调用keyframes定义好的动画（名称必须和keyframes后的名称相同，包括大小写）

animation-name: none | IDENT[,none|DENT]*;

当为none时，表示没有任何效果，用来覆盖任何动画

注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。

 

播放动画时间（持续时间）

animation-duration: <time>[,<time>]*

单位：s秒

默认为：0

 

播放方式：

如同transition－function

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

 

开始播放时间:

animation-delay:<time>[,<time>]*

与transition－delay相同

 

播放次数：

animation－iteration－count

animation-iteration-count: infinite | <number> [, infinite | <number>]*

通常为整数，默认值为1（表示从开始到结束只循环一次），取值为infinite（表示无限次循环）

 

播放动画方向：

animation-direction:normal | alternate [, normal | alternate]*

normal：表示每次循环都向前

alternate：表示播放第偶次向前，奇次反方向

 

播放动画状态：

animation－play－state：running｜paused

默认值为running，可以通过paused停下来，也可以通过running将暂停的动画重新播放（不一定是从元素开始播放，而是暂停的位置），如果暂停动画播放，元素将回到最原始设置的状态

 

设置动画时间外属性：

定义在动画开始之前和结束之后发生的操作。

在默认情况下，动画不会影响关键帧以外的属性，使用此关键字可以修改动画的默认行为。