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

概述我没有默认的动画元素.还有一个触发器让我打开&关闭该元素的动画.动画本身非常简单：从左到右移动元素. 当我停止动画时,我的元素显然会回到初始位置.但它突然回来了,并不顺利.所以它只是改变了我从关闭动画到初始动画时的位置.我的问题是：有没有办法让它顺利停止,所以当我关闭动画时它会回到初始位置但是平滑/动画. 这是我的元素和动画：http://jsfiddle.net/2Lwftq6r/ HTML： 我没有默认的动画元素.还有一个触发器让我打开&关闭该元素的动画.动画本身非常简单：从左到右移动元素.

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

这是我的元素和动画：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 ></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的实际浏览器列表.

总结

以上是内存溢出为你收集整理的html – 如何顺利地将CSS动画恢复到当前状态？全部内容，希望文章能够帮你解决html – 如何顺利地将CSS动画恢复到当前状态？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。