平滑停止 CSS 关键帧动画

Posted 2023-03-06

【中文标题】平滑停止 CSS 关键帧动画

【英文标题】：Smoothly stop CSS keyframe animation

【发布时间】：2015-06-22 11:27:02

【问题描述】：

我有以下代码：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>

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

我可以平稳地停止动画，以避免突然跳入，然后从停止点重新开始动画吗？

【问题讨论】：

也许这会有所帮助：github.com/jQueryKeyframes/jQuery.Keyframes

平稳停止是指像ease-in 过渡到停止吗？

@aug，也不错

查看此演示 jsfiddle.net/vals/NfX56/9 和此答案 ***.com/a/18025979/1926369

【参考方案1】：

您可以仅使用 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>

【讨论】：

我有一个类似的问题，我正在努力理解你的答案。您是说您制作了地图的第二份副本，但具有缓出功能？我现在正在比较原始代码和您的代码，但我仍然对它的工作原理感到有些困惑。

我已经改变了解释。我希望现在更清楚了，但可能是我的英语不够好......

图片链接失效

【参考方案2】：

你大约。添加到所有关键帧动画播放状态：暂停；。 在上面添加类以覆盖暂停到动画播放状态：正在运行；

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

【参考方案3】：

使用 javascript 设置 CSS。将animation-interation-count设置为1（而不是无限）并设置animation-timing-function来缓和。

它应该会自己慢慢停止。

【参考方案4】：

您不会喜欢这个答案，但事实是 CSS3 动画对于实现这一点并没有真正有用。要完成这项工作，您需要在 Javascript 中复制大量 CSS，这会破坏这一点（例如在这个密切相关的答案 Change speed of animation CSS3? 中）。要真正让它平稳停止，最好的办法是在像Greensock animation library 这样的平台上编写动画，它提供了使它真正平稳停止而不是突然停止所需的所有工具。