我有以下代码:http://jsfiddle.net/odj8v0x4/.
function stopGlobe() {
$('.mapfront').removeClass('mapfront-anim');
$('.mapback').removeClass('mapback-anim');
}
function startGlobe() {
$('.mapfront').addClass('mapfront-anim');
$('.mapback').addClass('mapback-anim');
}@keyframes mapfront_spin {
0% {
background-position: 1400px 0%;
}
100% {
background-position: 0 0%;
}
}
@keyframes mapback_spin {
0% {
background-position: 0 0%;
}
100% {
background-position: 1400px 0%;
}
}
@-webkit-keyframes mapfront_spin {
0% {
background-position: 1400px 0%;
}
100% {
background-position: 0 0%;
}
}
@-webkit-keyframes mapback_spin {
0% {
background-position: 0 0%;
}
100% {
background-position: 1400px 0%;
} …我没有默认的动画元素.还有一个触发器可以让我打开和关闭该元素的动画.动画本身非常简单:从左到右移动元素.
当我停止动画时,我的元素显然会回到初始位置.但它突然回来了,并不顺利.所以它只是改变了我从关闭动画到初始动画时的位置.我的问题是:有没有办法让它顺利停止,所以当我关闭动画时它会回到初始位置但是平滑/动画.
这是我的元素和动画: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); }
}