css3 - 图标元素动画效果1 - 只执行一次动画

在线演示

鼠标指针滑过时，图标在1秒内匀速旋转360度。
使用transform属性来实现图标的旋转，并且设置transitio动画，将变化的属性名称设置为transform。所以我们看到图标的旋转效果。

图标文件引入：

<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 {    
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #96CEB4;
    cursor: pointer;
    position: relative;
  }

  i { /*图标样式*/
    color: #FFEEAD;
    font-size: 48px;
    position: absolute;
    top: 8%;
    left: 19%;
  }

  .close:hover i {  /*该动画只执行一次*/
    -webkit-transform: rotate(360deg);/*鼠标hover时，i图标旋转*/
    transform: rotate(360deg);

    -webkit-transition: -webkit-transform 1s linear;/*transform进行动画，动画用时1秒钟*/
    transition: -webkit-transform 1s linear;
  }