html – 如何顺利地将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); }
}

解决方法

你不能只用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)'});
    });
});

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