3月，东亚季风带来了来自太平洋的潮湿空气，趁着小雨的周末，送上每周一个动画系列的第四篇。闲话不说，开始我们的正文。本文分析实现的某些效果，仅仅作为一个思路分享，仅仅作为学习素材使用。
源动画效果
在掘金个人主页页面，鼠标移动到头像上，头像有一个旋转动画，且旋转有一个明显的加速过程。
image
实现分析
经过分析，效果的实现有三点
- 圆形头像怎么实现
- 旋转效果的实现，怎么确定旋转的角度
- 旋转的速率有明显的变化，需要确定时间函数
代码实现
设置圆形头像可以通过设置圆角来实现
.avatar {
border-radius: 50%
}
旋转动画的实现可以通过直接使用css动画实现，注意这里在旋转角度上直接选择了圈数turn，IE9.0+,Firefox13.0+以及其他浏览器都支持了该属性（下图），放心使用。
image
至于旋转时的速度变化，可以直接通过我们前几篇文章就多次提到的时间函数来控制。
.avatar:hover {
transform: rotate(666turn);
transition-duration: 59s;
transition-timing-function: cubic-bezier(.34, 0, .84, 1)
}
效果展示
image
关键点解读
本文的动画实现起来并不复杂，个人感觉两个点值得记录一下。一个是圆形头像，可以通过设置圆角实现；另一个是设置旋转的时候可以直接通过turn来设置旋转的圈数；至于时间函数我想应该不用再提及了。
最后的惯例，贴上我的博客，欢迎关注
