CSS3动画

Keyframes介绍

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

举例：

@keyframes changecolor{

  0%{

    background: red;

  }

  20%{

    background:blue;

  }

  40%{

    background:orange;

  }

  60%{

    background:green;

  }

  80%{

    background:yellow;

  }

  100%{

    background: red;

  }

}

div {

  width: 300px;

  height: 200px;

  background: red;

  color:#fff;

  margin: 20px auto;

}

div:hover {

  animation: changecolor 5s ease-out .2s;

}

 

animation-name动画名称

属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。

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

 

animation-duration设置动画播放时间

 

主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒

语法规则

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

举例：制作一个矩形变成圆形的动画，整个动画播放时间持续了10s钟

@keyframes toradius{
  from {
    border-radius: 0;
  }
  to {
    border-radius: 100%;
  }
}
div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  background: green;
  margin: 20px auto;
}
div:hover {
  animation-name: toradius;  /*动画名称*/
  animation-duration: 10s;    /*动画播放时间*/
  animation-timing-function: ease-in-out;
  animation-delay: .1s;
}

animation-timing-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设置动画开始播放的时间

属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。

语法规则：

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

animation-iteration-count设置动画播放次数

属性主要用来定义动画的播放次数。

语法规则：

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

 

animation-direction设置动画播放方向

属性主要用来设置动画播放方向，其语法规则如下：

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

1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

animation-play-state设置动画的播放状态

属性主要用来控制元素动画的播放状态。

参数：

其主要有两个值：running和paused。

其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

例如，页面加载时，动画不播放。代码如下：

animation-play-state:paused;