Плавно остановить анимацию ключевого кадра CSS

У меня есть следующий код: 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>

Ответ 1

Вам не понравится этот ответ, но реальность такова, что анимации CSS3 не очень полезны для достижения этого. Чтобы сделать эту работу, вам нужно будет повторить много вашего CSS в вашем Javascript, который разрушает точку (например, в этом близком ответе Изменить скорость анимации CSS3?). Чтобы действительно сделать так, чтобы вы плавно останавливались, лучшим вариантом было бы написать анимацию на платформе, например, Библиотека анимации Greensock, которая предоставляет все необходимые инструменты чтобы он фактически плавно останавливался, а не внезапно останавливался.

Ответ 2

Вы можете добиться этого, используя только CSS.

Все, что вам нужно, - это небольшое движение, чтобы сделать его гладким.

Итак, я устанавливаю трансляцию при необходимости. И это преобразование переходит с облегчением, чтобы создать эффект сглаживания.

Итак, при зависании анимация останавливается (внезапно). Но в то же время применяется преобразование преобразования, и поскольку это преобразование переходит с соответствующим ослаблением, оно начинается сразу с той же скоростью, что и анимация.

Эта скорость замедляется в соответствии с ослаблением, пока она не остановится.

Я добавляю обертку в элемент, в котором применяется перевод. Чтобы избежать того, что это преобразование "перемещает" элемент, нам нужно сделать элемент большим, чем видимое пространство, и установить внутри оболочки, которая будет ограничивать видимую часть (которая будет статической)

Просто наведите курсор на земной шар. (смотрите ma, нет 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>

Ответ 3

Используйте javascript для установки CSS. Установите анимацию-interation-count в 1 (вместо бесконечного) и установите функцию анимации-времени для облегчения.

Затем он должен медленно остановиться на нем.

Ответ 4

Вы ca. добавить во все ключевые кадры анимация-play-state: pauseed;. добавьте класс выше, чтобы перезаписать приостановленный режим анимации-воспроизведения: running;

Просто удалите класс с javascript, если вы хотите приостановить его