平稳停车CSS关键帧动画 [英] Smoothly stop CSS keyframe animation

问题描述

我有以下的code： http://jsfiddle.net/odj8v0x4/

\r

\r

函数stopGlobe（）{\r
    $（'。mapfront'）removeClass移除（'mapfront-阿尼姆'）。\r
    $（'。mapback'）removeClass移除（'mapback-阿尼姆'）。\r
}\r
\r
功能startGlobe（）{\r
    $（'。mapfront'）addClass（'mapfront-阿尼姆'）。\r
    $（'。mapback'）addClass（'mapback-阿尼姆'）。\r
}

\r

@keyframes mapfront_spin {\r
    0％{\r
        背景位置：1400px 0％;\r
    }\r
    100％{\r
        背景位置：0 0％;\r
    }\r
}\r
@keyframes mapback_spin {\r
    0％{\r
        背景位置：0 0％;\r
    }\r
    100％{\r
        背景位置：1400px 0％;\r
    }\r
}\r
@ -webkit-关键帧mapfront_spin {\r
    0％{\r
        背景位置：1400px 0％;\r
    }\r
    100％{\r
        背景位置：0 0％;\r
    }\r
}\r
@ -webkit-关键帧mapback_spin {\r
    0％{\r
        背景位置：0 0％;\r
    }\r
    100％{\r
        背景位置：1400px 0％;\r
    }\r
}\r
身体 {\r
    保证金：50像素;\r
    背景：＃000;\r
}\r
.globe {\r
    宽度：400像素;\r
    高度：400像素;\r
    位置：相对;\r
}\r
。面前 {\r
    宽度：400像素;\r
    高度：400像素;\r
    背景：网址（http://dl.dropboxusercontent.com/u/17180596/SphereForeground.png）;\r
    的z-index：5;\r
    位置：绝对的;\r
    顶部：0;\r
    左：0;\r
}\r
。背部 {\r
    宽度：400像素;\r
    高度：400像素;\r
    背景：网址（http://dl.dropboxusercontent.com/u/17180596/SphereBackground.png）;\r
    的z-index：2;\r
    位置：绝对的;\r
    顶部：0;\r
    左：0;\r
}\r
.mapfront，.mapback {\r
    边界半径：300像素;\r
    宽度：340px;\r
    高度：340px;\r
    位置：绝对的;\r
    顶部：30PX;\r
    左：30像素;\r
    的z-index：4;\r
}\r
.mapfront {\r
    背景：网址（http://dl.dropboxusercontent.com/u/17180596/CartoForeground.png）重复-X;\r
}\r
.mapfront，阿尼姆{\r
    -webkit-动画：mapfront_spin 15S线性无穷;\r
    动画：mapfront_spin 15S线性无穷;\r
}\r
.mapback {\r
    背景：网址（http://dl.dropboxusercontent.com/u/17180596/CartoBackground.png）重复-X;\r
    位置：绝对的;\r
}\r
.mapback，阿尼姆{\r
    -webkit-动画：mapback_spin 15S线性无穷;\r
    动画：mapback_spin 15S线性无穷;\r
}

\r

＆LT; D​​IV CLASS =地球＆GT;\r
    ＆LT; D​​IV CLASS =前＆GT;＆LT; / DIV＆GT;\r
    ＆LT; D​​IV CLASS =mapfront mapfront-动画＆GT;＆LT; / DIV＆GT;\r
    ＆LT; D​​IV CLASS =mapback mapback-动画＆GT;＆LT; / DIV＆GT;\r
    ＆LT; D​​IV CLASS =后面＆GT;＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

执行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屋！