我有以下代码：

function stopGlobe() {

    $('.mapfront').removeClass('mapfront-anim');

    $('.mapback').removeClass('mapback-anim');

}



function startGlobe() {

    $('.mapfront').addClass('mapfront-anim');

    $('.mapback').addClass('mapback-anim');

}


@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;

}

.mapfront {

    background: url(http://dl.dropboxusercontent.com/u/17180596/CartoForeground.png) repeat-x;

}

.mapfront-anim {

    -webkit-animation: mapfront_spin 15s linear infinite;

    animation: mapfront_spin 15s linear infinite;

}

.mapback {

    background: url(http://dl.dropboxusercontent.com/u/17180596/CartoBackground.png) repeat-x;

    position: absolute;

}

.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 mapfront-anim"></div>

    <div class="mapback mapback-anim"></div>

    <div class="back"></div>

</div>

执行javascript函数后，stopGlobe()动画会停止，但会突然停止。

我可以平稳地停止动画，以避免突然跳入，然后从停止的位置再次继续动画吗？