平滑地停止CSS关键帧动画

Question

我有以下代码：http://jsfiddle.net/odj8v0x4/。

＆＃13;

＆＃13;

function stopGlobe() {
    $('.mapfront').removeClass('mapfront-anim');
    $('.mapback').removeClass('mapback-anim');
}

function startGlobe() {
    $('.mapfront').addClass('mapfront-anim');
    $('.mapback').addClass('mapback-anim');
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 1

您只需使用CSS即可实现此目的。

你所需要的只是一点动作才能让它变得平滑。

因此，我在需要时设置了转换。 并且这种变换通过缓和转换，以产生平滑效果。

因此，当悬停时，动画停止（突然）。但与此同时，应用了变换转换，并且由于此变换是通过适当的缓动转换的，因此它立即以与动画相同的速度开始。

此速度将根据宽松速度放缓，直至停止。

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

只是悬停在地球上。 （看马，没有JS）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你不会喜欢这个答案，但现实是CSS3动画对于实现这一目标并不是很有用。为了完成这项工作，您需要在Javascript中复制很多CSS，这会破坏这一点（例如，在这个密切相关的答案中Change speed of animation CSS3?）。要真正让它顺利停止，最好的选择是在Greensock animation library这样的平台上编写动画，它提供了所需的所有工具，使其实际上顺利停止而不是突然停止。

Answer 3

使用javascript设置CSS。将animation-iteration-count设置为1（而不是无限）并将animation-timing-function设置为easy out。

然后应该自己慢慢停下来。

Answer 4

你好吗？添加到所有关键帧animation-play-state：paused;。 添加上面的类以覆盖暂停到动画播放状态：running;

如果你想暂停它，只需用javascript删除它