css3 - 图标元素动画效果2 - 动画无限循环、循环一定次数、反向动画

在线演示

鼠标悬停，图标会一直不停旋转。
如果实现图标一直不停旋转，则需要使用animation动画。先制作动画的各个关键帧，然后在图标中运用这一动画。

图标文件引入：

<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">

html：

<div class="close"><i class="fa fa-close (alias) fa-5x">i>div>

css：

.close {
    cursor: pointer;
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #96CEB4;
    position: relative;
  }
  i {
    color: #FFEEAD;
    font-size: 48px;
    position: absolute;
    top: 8%;
    left: 19%;
  }

  /*定义动画*/
  @-webkit-keyframes spin { /*兼容性写法。spin是关键帧的动画名称*/
    from { /*动画起始状态*/
      -webkit-transform: rotate(0deg);
    }
    to { /*动画结束状态*/
      -webkit-transform: rotate(360deg);
    }
  }
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .close:hover i {
    -webkit-animation: spin 1s linear infinite;/*鼠标hover时，i图标旋转,infinite表示动画无限循环*/
    animation: spin 1s linear infinite;    
  }

解析：
keyframes：定义一个名为spin的关键帧动画。
from：指定动画的起始状态
to：指定动画的结束状态。
linear：动画匀速运动
infinite：表示动画无限循环

如果想让动画执行2次：

.close:hover i {
    -webkit-animation: spin 1s linear 2;/*2代表动画执行2次*/
    animation: spin 1s linear 2;    
  }

如果想让两次动画之间有延迟（比如一次动画结束，停留2秒再次执行动画，并且执行2次）：

.close:hover i {
    -webkit-animation: spin 1s linear 2s 2; /*2s代表延迟2秒 2代表动画执行2次*/
    animation: spin 1s linear 2s 2;    
  }

还可以反向旋转（alternate表示偶数次数反向播放动画，如下代码是顺时针旋转一次后，再逆时针旋转一次）：

.close:hover i {
    -webkit-animation: spin 1s linear 2s 2 alternate; /*2s代表延迟2秒 2代表动画执行2次*/
    animation: spin 1s linear 2s 2 alternate;    
  }