如何顺利恢复CSS动画，以目前的状态？ [英] How to smoothly revert CSS animation to its current state?

问题描述

我已经得到的不是动画的元素为默认值。还有一个触发器，让我打开＆安培;关闭该元素的动画。动画本身是很简单的：由左到右，后移动元素

当我停止动画，然后我的元素显然又回到了初始位置。但是，它可以追溯到突然，并不顺利。所以，当我关掉动画，最初的一只是改变来自之一的地位。我的问题是：有没有办法顺利阻止它，所以当我关掉动画，又回到初始位置，但顺畅/动画

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

HTML：

 ＆LT;输入类型=复选框ID =动画＆GT;
＆LT;标签=动画＆GT;启动/停止动画＆LT; /标签＆gt;
＆LT; D​​IV＆GT;＆LT; / DIV＆GT;
 

CSS：

  DIV {
    的margin-top：50px​​的;
    宽度：50像素;高度：10px的;
    背景：＃000;
    变换：translateX（0）;
}#anim：检查〜DIV {
    -webkit-动画：舞蹈2S无限易于在出;
    -moz-动画：舞蹈2S无限易于在出;
}@ -webkit-关键帧舞蹈{
  0％100％{-webkit变换：translateX（0）; }
  50％{-webkit-变换：translateX（300像素）; }
}
@ -moz关键帧{舞
  0％，100％{-moz变换：translateX（0）; }
  50％{-moz-变换：translateX（300像素）; }
}
 

解决方案

您不能存档这种效果只有 CSS3 的方式，但如果你真的需要它，你可以使用的jQuery + CSS3过渡。我的解决方案（ http://jsfiddle.net/sergdenisov/3jouzkxr/10/ ）：

HTML：

 ＆LT;输入类型=复选框ID =动画输入＆GT;
＆LT;标签=动画输入＆GT;启动/停止动画＆LT; /标签＆gt;
＆LT; D​​IV CLASS =动画-DIV＆GT;＆LT; / DIV＆GT;
 

CSS：

  .anim-DIV {
    的margin-top：50px​​的;
    宽度：50像素;
    高度：10px的;
    背景：＃000;
}    .anim-div_active {
        -webkit-动画：移动2S易于在出无穷的备用;
        动画：移动2S易于在出无穷的备用;
    }    .anim-div_return {
        -webkit-过渡：-webkit-变换0.5S易于在出;
        过渡：变换0.5S易于在出;
    }@ -webkit-关键帧移动{
    0％{-webkit-变换：translateX（0）; }
    100％{-webkit-变换：translateX（300像素）; }
}@keyframes移动{
    0％{变换：translateX（0）; }
    100％{变换：translateX（300像素）; }
}
 

的Javascript：

  $（'＃阿尼姆输入'）。在（'变化'，函数（）{
    变量$ animDiv = $（'阿尼姆-DIV。'）;
    如果（this.checked）{
        $ animDiv.removeClass（'阿尼姆-div_return'）
                .addClass（'阿尼姆-div_active'）;
        返回;
    }    VAR transformValue = $ animDiv.css（'webkitTransform'）||
                         $ animDiv.css（'变换'）;
    $ animDiv.css（{'webkitTransform'：transformValue，
                  '变换'：transformValue}）
            .removeClass（'阿尼姆-div_active'）;    requestAnimationFrame（函数（）{
        $ animDiv.addClass（'阿尼姆-div_return'）
                的.css（{'webkitTransform'：'translateX（1），
                      变换：translateX（0）'}）;
    }）;
}）;
 

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

I've got not animated element as default. There's also a trigger that lets me turn on & off animation on that element. The animation itself is very simple: moves element from left to the right and back.

When I stop animation, then my element obviously goes back to initial position. But it goes back suddenly, not smoothly. So it just changes its position from the one when I turned off animation to initial one. My question is: is there a way to stop it smoothly, so when I turn off the animation it goes back to initial position but smoothly/animating.

Here's my element and animation: 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); }
}

解决方案

You can't archive this effect only CSS3 way, but if you really need it, you could use jQuery + CSS3 Transitions. My solution (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. Vendor prefixes are based on actual browsers list from http://caniuse.com.

这篇关于如何顺利恢复CSS动画，以目前的状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！