<h2>鼠标经过动画会停止，移开恢复</h2>
<div id="ball"><img src="http://www.mrszhao.com/zb_users/upload/2018/01/rotate/images/bg-gear-f_089274a.png"></div>

body{
  font:1em "microsoft Yahei";
  color:#fff;
  background-color:#333;
  padding:20px;
}
#ball{
  width:126px;
  height:126px;
  animation:rotate 5s linear infinite ; 
}
#ball:hover{
  animation-play-state:paused; /*暂停动画*/
}
@keyframes rotate{
  0%{
    transform:rotate(0);
  }
  100%{
    transform:rotate(360deg);
  }
}