在前端的开发过程中，或多或少会有一些动效类的需求，这个时候我们会有两种方案
方案一：使用js去处理dom的移动或者显示隐藏（不推荐）
不推荐原因：因为使用js处理dom，在页面上的效果会有很明显的卡顿，因为浏览器的执行机制是根据帧数来刷新渲染页面的，如果你设置的时间大于或小于帧数，页面就渲染就会出现卡顿并且不流畅
方案二：使用css去处理dom的样式（推荐）
原因：css处理的是dom的样式，并不会直接操作dom元素
那么css的动画效果怎么做到暂停与恢复呢？
// 动画样式
.container{
animation: rotate 20s linar infinite;
}
.container:hover{
// running 运行
// paused 停止
animation-play-state:running;
