現在Google Chromeのみを使用しています。
-webkit-animation-fill-mode: forwards;追加するとアニメーションの終了状態が保持されると思いました。
ここで例を参照してください。
画像が -180 度にとどまらないのはなぜですか?
編集:最後のアニメーションの最後にあるもので、アニメーションを再度実行できるようにしたい。これは問題の単純化されたバージョンです。実際の問題は 15 度回転します。実行ごとに画像をさらに 15 度回転させたいと考えています。クラスを削除しないと、ボタンを2回クリックしても何も起こりません。
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');
});
});
});