您可以只使用CSS来实现这一点。
你所需要的只是一个小小的动作来使它平滑。
所以，我在需要的时候设置了一个translate变换，这个translate变换是用一个缓出来过渡的，以产生平滑的效果。
所以，当鼠标悬停时，动画（突然）停止。但同时，应用了变换平移，由于此变换是使用适当的缓动进行过渡的，因此它会立即以与动画相同的速度开始。
此速度将根据放松程度而减慢，直至停止。
我在应用了translate的元素中添加了一个 Package 器。为了避免这个转换"移动"了元素，我们需要使元素大于可见空间，并在 Package 器中设置限制可见部分（这将是静态的）
只是盘旋在地球上。（看妈妈，没有JS）

@keyframes mapfront_spin {
    0% {        background-position: 1400px 0%;    }
    100% {        background-position: 0 0%;    }
}
@keyframes mapback_spin {
    0% {        background-position: 0 0%;    }
    100% {        background-position: 1400px 0%;    }
}
@-webkit-keyframes mapfront_spin {
    0% {        background-position: 1400px 0%;    }
    100% {        background-position: 0 0%;    }
}
@-webkit-keyframes mapback_spin {
    0% {        background-position: 0 0%;    }
    100% {        background-position: 1400px 0%;    }
}
body {
    margin: 50px;
    background: #000;
}
.globe {
    width: 400px;
    height: 400px;
    position: relative;
}
.front {
    width: 400px;
    height: 400px;
    background: url(http://dl.dropboxusercontent.com/u/17180596/SphereForeground.png);
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
}
.back {
    width: 400px;
    height: 400px;
    background: url(http://dl.dropboxusercontent.com/u/17180596/SphereBackground.png);
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
}
.mapfront, .mapback {
    border-radius: 300px;
    width: 340px;
    height: 340px;
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 4;
    overflow: hidden;
}
.mapfront-inner {
    width: 380px;
    height: 340px;
    top: 0px;
    left: 0px;
    position: absolute;
    background: url(http://dl.dropboxusercontent.com/u/17180596/CartoForeground.png) repeat-x;
    transition: transform 1s ease-out;
}
.mapfront-anim {
    -webkit-animation: mapfront_spin 15s linear infinite;
    animation: mapfront_spin 15s linear infinite;
}
.globe:hover .mapfront-anim,
.globe:hover .mapback-anim 
{
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.globe:hover .mapfront-inner {
    transform: translateX(-40px);
}

.mapback-inner {
    width: 380px;
    height: 340px;
    top: 0px;
    left: -40px;
    background: url(http://dl.dropboxusercontent.com/u/17180596/CartoBackground.png) repeat-x;
    position: absolute;
    transition: transform 1s ease-out;
}
.globe:hover .mapback-inner {
    transform: translateX(40px);
}

.mapback-anim {
    -webkit-animation: mapback_spin 15s linear infinite;
    animation: mapback_spin 15s linear infinite;
}

<div class="globe">
    <div class="front"></div>
    <div class="mapfront">
        <div class="mapfront-inner mapfront-anim">
        </div>
    </div>
    <div class="mapback">
        <div class="mapback-inner  mapback-anim">
        </div>
    </div>
    <div class="back"></div>
</div>

你不会喜欢这个答案的，但现实是CSS3动画并不能真正实现这一点，要实现这一点，你需要在Javascript中复制大量的CSS，这有点破坏了这一点（例如，在这个密切相关的答案Change speed of animation CSS3?中）。要真正使它平稳地停止，最好的办法是在Greensock animation library这样的平台上编写动画，它提供了使它实际平稳地停止而不是突然停止所需的所有工具。

使用javascript来设置CSS。设置animation-interation-count为1（而不是无限），并设置animation-timing-function以进行缓动。
然后它会自己慢慢停下来。

您可以添加到所有关键帧animation-play-state：暂停;.添加上述类以覆盖暂停到动画播放状态：运行;
如果你想暂停的话，就用javascript删除类吧

简单变化

.mapfront-anim {
 -webkit-animation: mapfront_spin 15s linear infinite;
 animation: mapfront_spin 15s linear infinite;
}

以及

.mapback-anim {
 -webkit-animation: mapback_spin 15s linear infinite;
 animation: mapback_spin 15s linear infinite;
}

到

.mapfront-anim {
 -webkit-animation: mapfront_spin 15s linear infinite;
 animation: mapfront_spin 15s linear infinite;
 animation-iteration-count: 1;
}
.

.mapback-anim {
 -webkit-animation: mapback_spin 15s linear infinite;
 animation: mapback_spin 15s linear infinite;
 animation-iteration-count: 1;
}