在制作自定义动画时，有以下八个样式可供选择：
- animation-name(动画名称)：元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义。
- animation-duration(动画时间)：设置对象动画的持续时间
- animation-timing-function(动画的过渡速度)：设置对象动画的过渡速度类型
- animation-delay(动画延迟时间)：设置对象动画的延迟时间
- animation-iteration-count(动画执行次数)：设置对象动画的延迟时间
- animation-direction(动画的顺序)：设置对象动画在循环中是否按照相反顺序执行
- animation-play-state(动画的状态)
- 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;}
}