恢复html的初始选定状态,html – 如何顺利地将CSS动画恢复到当前状态？

你不能只用CSS3方式存档这个效果,但如果你真的需要它,你可以使用jQuery CSS3 Transitions.我的解决方案(

http://jsfiddle.net/sergdenisov/3jouzkxr/10/)：

HTML：

Start / stop animation

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的实际浏览器列表.