Question

我默认使用非动画元素。还有一个触发器让我打开＆amp;关闭该元素的动画。动画本身非常简单：从左到右移动元素。

当我停止动画时，我的元素显然会回到初始位置。但它突然回来了，并不顺利。所以它只是改变了我从关闭动画到初始动画时的位置。我的问题是：有没有办法让它顺利停止，所以当我关闭动画时它会回到初始位置但是平滑/动画。

HTML：

xmin

CSS：

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

Answer 1

我遇到了同样的问题，我通过不使用动画解决了它，它完美无缺！看看我的解决方案：所以我有这个刮刀，只有在我盘旋时才能移动，我希望它顺利过渡，所以这就是我所做的：

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

}

祝你好运！

Answer 2

您无法仅以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的实际浏览器列表。

Answer 3

查看This StackOverflow question。

你不会喜欢这个答案，但现实是CSS3 动画对实现这一点并不是很有用。为了使你的工作需要在你的Javascript中复制很多你的CSS 有点破坏了这一点（比如在这个密切关系中回答 Change speed of animation CSS3?）。要真正让它顺利停止，你最好的选择就是写下来像Greensock animation library这样的平台上的动画它提供了实现平滑所需的所有工具停止而不是突然停止。

下面还有另一个答案就是努力使用CSS，你可以看看那个。

Answer 4

还有另一种解决方案，它可能不会给您带来回到其原始状态的预期效果，但是由于没有人提到它并且此问题似乎没有解决方案，因此有可能完全在CSS中暂停动画，锁定它的状态，直到再次开始

要暂停动画，您首先需要使动画可用，即使未选中该复选框

并利用animation-play-state属性

div { 
    margin-top: 50px;
    width: 50px; height: 10px;
    background: #000;
    animation: dance 2s infinite ease-in-out paused;
}

#anim:checked ~ div {
    animation-play-state: running;
}

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

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

如何顺利地将CSS动画恢复到当前状态？

4 个答案: