图标元素动画效果

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

---

来源：51CTO

作者：Waiting_yours

链接：https://blog.csdn.net/weixin_43207025/article/details/100638363