css 动画 (掘金头像)

鼠标移入 开始缓慢的转 后来飞快转，鼠标移出动画移除； 

<div class="green">
	<img src="../../img/1_3.jpg" />
</div>

.green {
	width: 100px;
	height: 100px;
	margin:60px;
	border-radius: 50%;
	overflow: hidden;
}
			
@keyframes rotatee {
	from {
		transform: rotate(0)
	}
	to {
		transform: rotate(40turn)
	}
}
			
.rotateactive {
	animation: rotatee 10s alternate cubic-bezier(.88, .14, .79, .85);
}

//鼠标移入移出
$(".green").hover(function() {
	$(this).addClass("rotateactive");
}, function() {
	$(this).removeClass("rotateactive");
})

效果图：

主要是两点 一个是  rotate里面不是只能写deg 还可以写成    角度值deg，弧度值rad，梯度gard，转/圈turn

这里直接用turn就好了 省的算了 ;第二个是  旋转速度的控制   要用cubic-bezier(n,n,n,n)这个东西来灵活控制，不知道取什么值可以参考  https://cubic-bezier.com/    在这上面绘制，会自动出来;