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;
 }