图标元素动画效果

这次，使用另外一种动画的画法：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;
    }

以上，就介绍完了 animation 动画的使用。

---