平滑停止 CSS 关键帧动画 [英] Smoothly stop CSS keyframe animation

问题描述

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

function stopGlobe() {$('.mapfront').removeClass('mapfront-anim');$('.mapback').removeClass('mapback-anim');}函数 startGlobe() {$('.mapfront').addClass('mapfront-anim');$('.mapback').addClass('mapback-anim');}

@keyframes mapfront_spin {0% {背景位置:1400px 0%；}100% {背景位置:0 0%；}}@keyframes mapback_spin {0% {背景位置:0 0%；}100% {背景位置:1400px 0%；}}@-webkit-keyframes mapfront_spin {0% {背景位置:1400px 0%；}100% {背景位置:0 0%；}}@-webkit-keyframes mapback_spin {0% {背景位置:0 0%；}100% {背景位置:1400px 0%；}}身体 {边距:50px；背景:#000；}.globe {宽度:400px；高度:400px；位置:相对；}.正面 {宽度:400px；高度:400px；背景:网址(http://dl.dropboxusercontent.com/u/17180596/SphereForeground.png)；z-索引:5；位置:绝对；顶部:0；左:0；}.背部 {宽度:400px；高度:400px；背景:网址(http://dl.dropboxusercontent.com/u/17180596/SphereBackground.png)；z-索引:2；位置:绝对；顶部:0；左:0；}.mapfront, .mapback {边框半径:300px；宽度:340px；高度:340px；位置:绝对；顶部:30px；左:30px；z-索引:4；}.mapfront {背景:网址(http://dl.dropboxusercontent.com/u/17180596/CartoForeground.png)repeat-x；}.mapfront-动画{-webkit-animation: mapfront_spin 15s 线性无限；动画:mapfront_spin 15s 线性无限；}.mapback {背景:网址(http://dl.dropboxusercontent.com/u/17180596/CartoBackground.png)repeat-x；位置:绝对；}.mapback-动画{-webkit-animation: mapback_spin 15s 线性无限；动画:mapback_spin 15s 线性无限；}

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

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

我可以平滑停止动画，避免突然跳入，然后从停止的点继续动画吗?

解决方案

您不会喜欢这个答案，但现实是 CSS3 动画对于实现这一点并没有真正的用处.要完成这项工作，您需要在 Javascript 中复制大量 CSS，这会破坏这一点(例如在这个密切相关的答案中 更改动画 CSS3 的速度?).要真正让它顺利停止，最好的办法是在像 Greensock 动画库这样的平台上编写动画它提供了您需要的所有工具，使其实际上平稳停止而不是突然停止.

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?

解决方案

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.

这篇关于平滑停止 CSS 关键帧动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！