首先复习一下animation动画添加各种参数
（1）infinite参数，表示动画将无限循环。在速度曲线和播放次数之间还可以插入一个时间参数，用以设置动画延迟的时间。如希望使图标在1秒钟后再开始旋转，并旋转两次，代码如下
.close:hover::before{
-webkit-animation: spin 1s linear 1s 2;
animation: spin 1s linear 1s 2;
}（2）alternate参数。animation动画中加入反向播放参数alternate。在加入该参数后，动画将在偶数次数时反向播放动画。
.close:hover::before{
-webkit-animation: spin 1s linear 1s 2 alternate;
animation: spin 1s linear 1s 2 alternate;
}animation属性参数中，延迟参数是我们较为常用的一种参数。当动画的对象为多个时，我们常常用延迟参数来形成动画序列。如以下代码定义了5个不同的图标：
<span class="close icon-suningliujinyun">Close</span>
<span class="close icon-shousuo">Close</span>
<span class="close icon-zhankai">Close</span>
<span class="close icon-diaoyonglian">Close</span>
<span class="close icon-lingshouyun">Close</span>图标的基本样式和之前的Close图标一致，不同之处在于此处的图标都设置为inline-block，使它们能够横向排列。代码如下：
.close{
font-size:0px;/*使span中的文字不显示*/
cursor:pointer;/*使鼠标指针显示为手型*/
display:inline-block;
width:100px;
height:100px;
line-height:100px;
border-radius:50%;/*使背景形状显示为圆形*/
background:#FFF;
color:#8b8ab3;
text-align:center;
}
.close::before{
font-family: 'suningcloud';
speak:none; /*使文本内容不能通过屏幕阅读器等辅助设备读取*/
font-size:48px;
display:block;
}初始化的时候展示，如下图所示；
接下来，为图标添加animation动画，使图标初始位置向下偏移-100%，然后再向上移动回到初始位置，在此过程中同时使图标由完全透明变化为完全不透明
.close{
font-size:0px;/*使span中的文字不显示*/
cursor:pointer;/*使鼠标指针显示为手型*/
display:inline-block;
width:100px;
height:100px;
line-height:100px;
border-radius:50%;/*使背景形状显示为圆形*/
background:#FFF;
color:#8b8ab3;
text-align:center;
/**/
-webkit-animation: moving 1s linear;
animation: moving 1s linear;
}
