Question

目前只使用谷歌浏览器。

我认为添加-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');
        });
    });
});

Answer 1

Check out mine : http://jsfiddle.net/BYfDZ/16/

我建议您在添加到班级后删除“flip180”课程

CSS3动画填充模式：转发

1 个答案: