目前只是使用谷歌浏览器。
我认为添加-webkit-animation-fill-mode: forwards;
会保留动画的最终状态。
请参阅此处的示例。
为什么图像不保持在 -180 度?
编辑:我希望动画能够再次运行,就像最后一个动画结束时一样。 这是问题的简化版本 - 实际问题旋转 15 度,我希望图像在每次运行时再旋转 15 度。如果我不删除该类,则第二次单击按钮不会执行任何操作。
.CSS:
.flip180 {
-webkit-animation-name: flip180;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes flip180 {
from { -webkit-transform: rotateX(0); }
to { -webkit-transform: rotateX(-180deg); }
}
.HTML:
<button id="flipButton">Flip</button>
<img id="shape" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/articles/article/2012/07/darth.jpg">
Javascript:
$(document).ready(function() {
$('#flipButton').click(function() {
$('#shape').addClass('flip180').on('webkitAnimationEnd', function() {
$('#shape').removeClass('flip180');
});
});
});
Check out mine : http://jsfiddle.net/BYfDZ/16/
我的建议是在添加到类后不要删除"flip180"类