这次，使用另外一种动画的画法：animation。
还是，准备一个元素作为图标的载体，并进行以下设置：
<span class="close">Close</span>
然后，把close隐藏，增加一个圆形按钮：
<style>
@font-face {
font-family: 'icon-font';
src: url('font/flat-ui-icons-regular.ttf'), url('font/flat-ui-icons-regular.eot'), url('font/flat-ui-icons-regular.woff'), url('font/flat-ui-icons-regular.svg');
}
body{
background: #8b8ab3;
}
.close{
font-size: 0px; /*使sapn中的文字不再显示*/
cursor: pointer; /*鼠标指针显示为手型*/
display: block;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%; /*使背景形状显示为图形*/
background: #ffffff;
color: #8b8ab3;
text-align: center;
}
.close::before{
content: "\e609";
font-family: 'icon-font';
font-size: 48px;
display: block;
}
接下来，设置鼠标指针滑过时的一些动画效果。
.close:hover::before{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: -webkit-transform 1s linear;
transition: transform 1s linear;
}
上面使用了transform属性来实现图标的旋转并设置了transition动画。rotate(360deg) 是2D旋转360度，以deg为度数单位。详情看下面网页：
https://www.w3school.com.cn/cssref/pr_transform.asp
transition 语法还是与之前一样，这里的对象是 transform。
效果如下：
注意：只有transform不能生成动画效果，要与transition和animation属性配合使用。
下面，设置动画一直循环：
@-webkit-keyframes spin{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
@keyframes spin{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
在上面的代码中，使用了 keyframes 关键字来定义了一个名为 spin 的关键帧动画。在其中，使用了from 关键字来指定动画的起始状态， to 关键字来指定动画的结束状态。-webkit- 是兼容webkit浏览器。详情可见CSS3-Keyframes规则：
https://www.w3school.com.cn/cssref/pr_keyframes.asp
创建了动画之后，我们就要在图表中应用这一动画：
.close:hover::before{
-webkit-animation: spin 1s linear;
animation: spin 1s linear;
}
设置鼠标下滑状态下的 animation 属性，属性的第一个参数是动画的名称；第二个参数是动画的时长；第三个参数是速度曲线，在此设置为匀速运动。（在这里可以把之前设置的动画的代码删去）测试页面，我们得到和之前 transition 动画相同的结果。
现在，设置图标一直旋转：
.close:hover::before{
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
只需要在animation属性中添加infinite参数，animation属性详情见：
https://www.w3school.com.cn/cssref/pr_animation.asp
当然，我们也可以只让动画循环一定的次数，只需要把 infinite 改为次数即可：
.close:hover::before{
-webkit-animation: spin 1s linear 2;
animation: spin 1s linear 2;
}
根据上面的表格，还可以在速度曲线和播放次数之间加入动画的延迟播放时间：
.close:hover::before{
-webkit-animation: spin 1s linear 1s 2;
animation: spin 1s linear 1s 2;
}
还可以在最后加上反播放参数 alternate。在加入参数后，动画将在偶数次时反向播放动画。例如在上面的代码中加入后，图标将顺时针旋转一次后，再逆时针旋转一次：
.close:hover::before{
-webkit-animation: spin 1s linear 1s 2 alternate;
animation: spin 1s linear 1s 2 alternate;
}