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

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 
     
       {[ from | to | 
      
        ]{ sRules } ] [,*]}
      
     

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

例：

*{margin:0;padding:0;}.box{width: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{　　width: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{　　width: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{　　width: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;}　
     
  
     
  
     
  
     

 

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

animation-play-state：running | paused

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

例：

.box{　　width: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{　　width: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{　　width:100px;height:100px;background:red;　　animation:fly 1s ease 2s forwards;}@keyframes fly{　　0%{margin-left:0px;}　　100%{margin-left:300px;}}