我没有默认的动画元素.还有一个触发器让我打开&关闭该元素的动画.动画本身非常简单：从左到右移动元素.
当我停止动画时,我的元素显然会回到初始位置.但它突然回来了,并不顺利.所以它只是改变了我从关闭动画到初始动画时的位置.我的问题是：有没有办法让它顺利停止,所以当我关闭动画时它会回到初始位置但是平滑/动画.
这是我的元素和动画：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的实际浏览器列表.
