自定义动画

在制作自定义动画时，有以下八个样式可供选择：

1. animation-name(动画名称)：元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义。
2. animation-duration(动画时间)：设置对象动画的持续时间
3. animation-timing-function(动画的过渡速度)：设置对象动画的过渡速度类型
4. animation-delay(动画延迟时间)：设置对象动画的延迟时间
5. animation-iteration-count(动画执行次数)：设置对象动画的延迟时间
6. animation-direction(动画的顺序)：设置对象动画在循环中是否按照相反顺序执行
7. animation-play-state(动画的状态)
8. animation-fill-mode(动画时间之外的状态)

在定义了这些动画的基本属性之后，我们制作动画还需要制定动画的关键帧keyframes；

其用法为

@keyframes <identifier> {

[ from | to | <percentage> ]{ sRules } ] [,*]

}

 通过动画名称来确定是哪一个元素要产生动画，通过时间段内特殊点的样式来使得动画效果符合预期。

例：

*{margin:0;padding:0;}
.box{
100px;height:100px;background:red;
animation-name:fly;
animation-duration:1s;
}
@keyframes fly{
0%{margin-left:0px;}
100%{margin-left:300px;}
}

 通过以上设置，我们便做出了一个简单的平移动画效果，想要让动画的效果更佳多样化，则必须对动画中的各个属性有更佳详尽的了解。

animation-timing-function的语法如下：

animation-timing-function： ease | linear | ease-in | ease-out | ease-in-out

 其各个属性值都是描述动画的快慢效果，默认值为ease。

animation-delay设置的是动画的延迟，即在多长时间后，动画效果开始执行。

例：

.box{
　　100px;height:100px;background:red;
　　animation-name:fly;
　　animation-duration:1s;
　　animation-delay:2s;
}
@keyframes fly{
　　0%{margin-left:0px;}
　　100%{margin-left:300px;}
}

 animation-iteration-count：infinite | <number>

animation-iteration-count表示动画执行的次数，若其值区为infinite，则表示动画会无限次执行。

例：

.box{
　　100px;height:100px;background:red;
　　animation-name:fly;
　　animation-duration:1s;
　　animation-iteration-count:infinite;
}
@keyframes fly{
　　0%{margin-left:0px;}
　　100%{margin-left:300px;}
}

 animation-direction：normal | reverse | alternate | alternate-reverse

表示动画执行的放向及方式，例：

.box{
　　100px;height:100px;background:red;
　　animation-name:fly;
　　animation-duration:1s;
　　animation-delay:2s;
　　animation-iteration-count:infinite;
}
@keyframes fly{
　　0%{margin-left:0px;}
　　100%{margin-left:300px;}
}

.alternate{
　　animation-direction:alternate;
　　background:green;
}
.alternate-reverse{
　　animation-direction:alternate-reverse;
　　background:blue;
}
.reverse{
　　animation-direction:reverse;
　　background:yellow;
}
　<div class="box"></div>
  <div class="box alternate"></div>
  <div class="box reverse"></div>
  <div class="box alternate-reverse"></div>

通过上述代码的效果，我们可以看出其各个属性值所表示的动画方向及效果。

animation-play-state：running | paused

表示动画的状态，暂停还是执行。

例：

.box{
　　100px;height:100px;background:red;
　　animation-name:fly;
　　animation-duration:1s;
　　animation-delay:2s;
　　animation-iteration-count:infinite;
}
@keyframes fly{
　　0%{margin-left:0px;}
　　100%{margin-left:300px;}
}
.box:hover{
　　animation-play-state:paused;
}
.box:active{
　　animation-play-state:running;
}

在上述例子中，鼠标移入时，动画暂停，移出时动画继续。在任何动画效果停止的状态，用鼠标点击元素，动画进行。

animation-fill-mode ： none | forwards | backwards | both

设置对象动画时间之外的状态：

none：默认值。不设置对象动画之外的状态

forwards：设置对象状态为动画结束时的状态（@keyrames中100%时各个属性值所描述的状态）

backwards：设置对象状态为动画开始时的状态（@keyrames中0%时各个属性值所描述的状态）

both：设置对象状态为动画结束或开始的状态

例：

.box{
　　100px;height:100px;background:red;
　　animation-name:fly;
　　animation-duration:1s;
　　animation-delay:2s;
　　animation-fill-mode:forwards;
}
@keyframes fly{
　　0%{margin-left:0px;}
　　100%{margin-left:300px;}
}

我们也可以将上述的动画简写：

animation：[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || <single-animation-fill-mode> || <single-animation-play-state> [ ,*]

则，上述的例子可写为：

.box{
　　100px;height:100px;background:red;
　　animation:fly 1s ease 2s forwards;
}
@keyframes fly{
　　0%{margin-left:0px;}
　　100%{margin-left:300px;}
}