javascriptcssanimationkeyframe

Smoothly stop CSS keyframe animation

I have the following code: http://jsfiddle.net/odj8v0x4/.

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>

After executing javascript functions stopGlobe() animation stops, but stops abruptly.

Can I smoothly stop the animation, to avoid sudden jumps in and then continue the animation again from the point at which it left off?

Solution

  • You aren't going to like this answer, but reality is that CSS3 animations aren't really useful to achieve this. To make this work you would need to replicate a lot of your CSS in your Javascript which kind of destroys the point (Like for example in this closely related answer Change speed of animation CSS3?). To really make it stop smoothly your best bet would be to write the animation on a platform like the Greensock animation library which provides all the tools you need to make it actually smoothly stop instead of suddenly stop.