Javascript 悬停时，将动画停止在各自的位置

我有两个div，其中一个圆和一个smily，其中innercille1div随着给定动画旋转。 我想要的是，当我将鼠标悬停在innercircle1div上时，它应该停止，但使用其当前变换原点位置， 当前，当我将鼠标悬停在innercircle1div上时，它会转到它们的起点，即它们给定的变换原点并停止

正文{
背景：#000；
颜色：#fff；
}
@关键帧圆{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}
@内圆关键帧{
从{
变换：旋转（0度）；
}
到{
变换：旋转（-360度）；
}
}
.外圆{
边框：1px纯红；
边界半径：50%；
宽度：310px；
保证金：64px自动；
高度：310px；
位置：相对位置；
}
.内圈{
宽度：100px；
高度：100px；
利润率：20px自动0；
颜色：橙色；
字体大小：100px；
线高：1；
动画：圆形5s线性无限；
变换原点：50%200px；
位置：绝对位置；
顶部：-70px；
左：109px；
}
.内圆1{
动画：内圈5s线性无限；
}

---

☻您可以使用JQUERY和CSS暂停动画

使用动画播放状态属性的一个非常简单的解决方案。
试试下面这些句子：

    .innercircle1 {
        animation: inner-circle 5s linear infinite;
        animation-play-state: play;
    }
   .innercircle1:hover{
        animation-play-state: paused;
    }

谢谢，已经完成了，但是你能建议我如何使用Jquery吗？@WebStarter，看看这里，你如何使用Jquery：