如何平滑地将CSS动画恢复到当前状态？

我有没有动画元素作为默认值。还有一个触发器可以让我在该元素上关闭动画&。动画本身非常简单：将元素从左向右移动回来。如何平滑地将CSS动画恢复到当前状态？

当我停止动画时，我的元素显然会回到初始位置。但它突然倒退，并不顺利。所以当我关闭动画到最初动画时，它只是改变了它的位置。我的问题是：是否有一种方法可以使其顺利停止，因此，当我关闭动画时，它会回到初始位置，但流畅/动画。

这里是我的元素和动画：http://jsfiddle.net/2Lwftq6r/

HTML：

<input type="checkbox" id="anim"> 
<label for="anim">Start/stop animation</label> 
<div></div>

CSS：

div { 
    margin-top: 50px; 
    width: 50px; height: 10px; 
    background: #000; 
    transform: translateX(0); 
} 

#anim:checked ~ div { 
    -webkit-animation: dance 2s infinite ease-in-out; 
    -moz-animation: dance 2s infinite ease-in-out; 
} 

@-webkit-keyframes dance { 
    0%, 100% { -webkit-transform: translateX(0); } 
    50% { -webkit-transform: translateX(300px); } 
} 
@-moz-keyframes dance { 
    0%, 100% { -moz-transform: translateX(0); } 
    50% { -moz-transform: translateX(300px); } 
}

来源

2015-05-09 Paweł

不幸的是，当前的CSS规范没有对此行为做出规定。这个问题有几个解决方法（在停止/删除动画之后没有转换回“基态”），但它们都是基于JS的。你会考虑一个基于JS的解决方案吗？ – Terry

[Smoothly stop CSS keyframe animation]可能的重复（http://stackoverflow.com/questions/29668238/smoothly-stop-css-keyframe-animation） – brenjt

你是指loop吗？ –

退房This StackOverflow question。

你不会喜欢这个答案，但现实情况是，CSS3动画没有达到这个真的很有用。为了使这项工作你将需要复制你的Javascript的很多你的CSS，其中种破坏点（例如在这个密切相关的答案 Change speed of animation CSS3?）。要真正让它停下来，你最好的选择就是在Greensock animation library 这样的平台上写出动画，它提供了所有你需要的工具，让它实际上能够平稳地停止，而不是突然停下来。

下面还有另外一个答案，它确实在使用CSS做出了努力，你可以看看那个。

来源

2015-05-09 21:04:09

在相关说明中，这是正在添加到角度animateCss服务的东西。 – Rorschach120

您不能仅通过CSS3存档此效果，但如果您确实需要它，则可以使用jQuery + CSS3 Transitions。我的解决方案（http://jsfiddle.net/sergdenisov/3jouzkxr/10/）：

HTML：

<input type="checkbox" id="anim-input"> 
<label for="anim-input">Start/stop animation</label> 
<div class="anim-div"></div>

CSS：

.anim-div { 
    margin-top: 50px; 
    width: 50px; 
    height: 10px; 
    background: #000; 
} 

    .anim-div_active { 
     -webkit-animation: moving 2s ease-in-out infinite alternate; 
     animation: moving 2s ease-in-out infinite alternate; 
    } 

    .anim-div_return { 
     -webkit-transition: -webkit-transform 0.5s ease-in-out; 
     transition: transform 0.5s ease-in-out; 
    } 

@-webkit-keyframes moving { 
    0% { -webkit-transform: translateX(0); } 
    100% { -webkit-transform: translateX(300px); } 
} 

@keyframes moving { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(300px); } 
}

的Javascript：

$('#anim-input').on('change', function() { 
    var $animDiv = $('.anim-div'); 
    if (this.checked) { 
     $animDiv.removeClass('anim-div_return') 
       .addClass('anim-div_active'); 
     return; 
    } 

    var transformValue = $animDiv.css('webkitTransform') || 
         $animDiv.css('transform'); 
    $animDiv.css({'webkitTransform': transformValue, 
        'transform': transformValue}) 
      .removeClass('anim-div_active'); 

    requestAnimationFrame(function() { 
     $animDiv.addClass('anim-div_return') 
       .css({'webkitTransform': 'translateX(0)', 
         'transform': 'translateX(0)'}); 
    }); 
});

P.S. 供应商前缀基于http://caniuse.com的实际浏览器列表。

来源

2015-05-13 18:24:20

我只是有同样的问题，我解决了它通过不使用动画，它完美的作品！看看我的解决方案：所以我有这个锅铲，我不得不在上空盘旋，只动了，我想这回平稳过渡，所以这是我做过什么：

#Spatula:hover{ 
    animation-direction:alternate; 
    transform: translate(1.2cm,1cm); 
    transition: all 1.5s; 
    -webkit-transition: all 1.5s; 

} 

#Spatula{ 
    -webkit-transition: all 1.5s; 
    transition: all 1.5s; 

}

祝你好运！

来源

2016-02-26 18:33:36

这真的有窍门！我永远不会想到这一点。 –

如何平滑地将CSS动画恢复到当前状态？

回答

相关问题