Javascript 平滑停止CSS关键帧动画

我有以下代码：

函数stopGlobe（）{
$（'.mapfront'）.removeClass（'mapfront-anim'）；
$（'.mapback'）.removeClass（'mapback-anim'）；
}
函数startGlobe（）{
$（'.mapfront'）.addClass（'mapfront-anim'）；
$（'.mapback'）.addClass（'mapback-anim'）；
}

@关键帧贴图前\u旋转{
0% {
背景位置：1400px 0%；
}
100% {
背景位置：0.0%；
}
}
@关键帧映射回旋转{
0% {
背景位置：0.0%；
}
100% {
背景位置：1400px 0%；
}
}
@-webkit关键帧mapfront\u旋转{
0% {
背景位置：1400px 0%；
}
100% {
背景位置：0.0%；
}
}
@-webkit关键帧映射回旋转{
0% {
背景位置：0.0%；
}
100% {
背景位置：1400px 0%；
}
}
身体{
利润率：50像素；
背景：#000；
}
.地球仪{
宽度：400px；
高度：400px；
位置：相对位置；
}
.前线{
宽度：400px；
高度：400px；
背景：url(http://dl.dropboxusercontent.com/u/17180596/SphereForeground.png);
z指数：5；
位置：绝对位置；
排名：0；
左：0；
}
.回来{
宽度：400px；
高度：400px；
背景：url(http://dl.dropboxusercontent.com/u/17180596/SphereBackground.png);
z指数：2；
位置：绝对位置；
排名：0；
左：0；
}
.mapfront、.mapback{
边界半径：300px；
宽度：340px；
高度：340px；
位置：绝对位置；
顶部：30px；
左：30px；
z指数：4；
}
mapfront先生{
背景：url(http://dl.dropboxusercontent.com/u/17180596/CartoForeground.png)重复-x；
}
.mapfront动画{
-webkit动画：mapfront_自旋15s线性无限；
动画：mapfront_自旋15s线性无限；
}
mapback先生{
背景：url(http://dl.dropboxusercontent.com/u/17180596/CartoBackground.png)重复-x；
位置：绝对位置；
}
.mapback动画{
-webkit动画：mapback_自旋15s线性无限；
动画：mapback_自旋15s线性无限；
}

您不会喜欢这个答案，但现实是CSS3动画对实现这一点并没有真正的帮助。为了实现这一点，您需要在Javascript中复制大量CSS，这会破坏这一点（例如，在这个密切相关的答案中）。要想让它真正平稳地停止，最好的办法是在像这样的平台上编写动画，该平台提供了使它真正平稳停止而不是突然停止所需的所有工具

使用javascript设置CSS。将动画交互计数设置为1（而不是无限），并将动画计时功能设置为“减缓”

---

然后它应该自己慢慢停止。

您可以仅使用CSS来实现这一点

你所需要的只是一个小小的移动，使它平滑

因此，我在需要时设置了一个转换。 这个变换被轻松地转换，以产生平滑效果

因此，悬停时，动画（突然）停止。但同时，应用了变换平移，由于该变换以适当的速度进行变换，因此它立即以与动画相同的速度开始

这一速度将随着缓和而减慢，直到停止

我在应用了translate的元素中添加了一个包装器。为了避免此转换“移动”元素，我们需要使元素大于可见空间，并设置在包装器内部，以限制可见部分（将是静态的）

就在地球上盘旋吧。（看马，没有JS）

@关键帧贴图前\u旋转{
0%{背景位置：1400px 0%；}
100%{背景位置：0 0%；}
}
@关键帧映射回旋转{
0%{背景位置：0 0%；}
100%{背景位置：1400px 0%；}
}
@-webkit关键帧mapfront\u旋转{
0%{背景位置：1400px 0%；}
100%{背景位置：0 0%；}
}
@-webkit关键帧映射回旋转{
0%{背景位置：0 0%；}
100%{背景位置：1400px 0%；}
}
身体{
利润率：50像素；
背景：#000；
}
.地球仪{
宽度：400px；
高度：400px；
位置：相对位置；
}
.前线{
宽度：400px；
高度：400px；
背景：url(http://dl.dropboxusercontent.com/u/17180596/SphereForeground.png);
z指数：5；
位置：绝对位置；
排名：0；
左：0；
}
.回来{
宽度：400px；
高度：400px；
背景：url(http://dl.dropboxusercontent.com/u/17180596/SphereBackground.png);
z指数：2；
位置：绝对位置；
排名：0；
左：0；
}
.mapfront、.mapback{
边界半径：300px；
宽度：340px；
高度：340px；
位置：绝对位置；
顶部：30px；
左：30px；
z指数：4；
溢出：隐藏；
}
.mapfront内{
宽度：380px；
高度：340px；
顶部：0px；
左：0px；
位置：绝对位置；
背景：url(http://dl.dropboxusercontent.com/u/17180596/CartoForeground.png)重复-x；
转换：转换1s缓解；
}
.mapfront动画{
-webkit动画：mapfront_自旋15s线性无限；
动画：mapfront_自旋15s线性无限；
}
.globe:hover.mapfront动画，
.地球仪：悬停.地图绘制动画
{
-webkit动画播放状态：暂停；
动画播放状态：暂停；
}
.globe:悬停。地图前部内部{
转换：translateX（-40px）；
}
.mapback内部{
宽度：380px；
高度：340px；
顶部：0px；
左：-40px；
背景：url(http://dl.dropboxusercontent.com/u/17180596/CartoBackground.png)重复-x；
位置：绝对位置；
转换：转换1s缓解；
}
.globe:悬停.mapback内部{
转换：translateX（40px）；
}
.mapback动画{
-webkit动画：mapback_自旋15s线性无限；
动画：mapback_自旋15s线性无限；
}