每周一个前端动画之四：掘金头像旋转动画

3月，东亚季风带来了来自太平洋的潮湿空气，趁着小雨的周末，送上每周一个动画系列的第四篇。闲话不说，开始我们的正文。本文分析实现的某些效果，仅仅作为一个思路分享，仅仅作为学习素材使用。

作为重度掘金用户，偶然发现了这个动画，动画实现起来很简单，整理如下，好奇问一句，你发现这个动画了没。

源动画效果

在掘金个人主页页面，鼠标移动到头像上，头像有一个旋转动画，且旋转有一个明显的加速过程。

实现分析

经过分析，效果的实现有三点

• 圆形头像怎么实现
• 旋转效果的实现，怎么确定旋转的角度
• 旋转的速率有明显的变化，需要确定时间函数

代码实现

设置圆形头像可以通过设置圆角来实现

.avatar {
    border-radius: 50%
}

旋转动画的实现可以通过直接使用css动画实现，注意这里在旋转角度上直接选择了圈数turn，IE9.0+,Firefox13.0+以及其他浏览器都支持了该属性（下图），放心使用。