10/14
2016
刚才我给评论区头像添加了鼠标经过旋转的效果，是使用css3动画做的。
在css样式表里先定义一个旋转的动画，然后在鼠标经过头像时触发动画：
@keyframes rotate_once{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.comment-meta .avatar:hover{
animation: rotate_once .5s;
}
有时候必须结合JavaScript事件播放动画的时候，可以先把animation那句放到一个单独的class名里，然后通过JavaScript来动态添加、删除改动画的className，来达到播放动画或去除动画的效果。
示例：
element.addEventListener("mouseover",function(){
element.className=nowClassName+" rotate_once";
element.addEventListener("animationend",function(){
element.className=nowClassName;
})
});
鼠标经过元素时添加rotate_once这个className，播放动画。动画播放完毕之后再去掉这个className。
这里有个知识点，就是JavaScript里有三个能监听动画播放的事件：
animationStart 动画开始执行 animationEnd 动画执行结束 animationIteration 重复动画开始执行（只有重复动画才会触发）
