CSS3動畫填充模式：轉發

我認爲添加-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'); 
     }); 
    }); 
});

來源

2012-08-11 PeteGO

我剛剛編輯你的：http://jsfiddle.net/BYfDZ/16/。如果你想停留在180年底，不要刪除flip180類。 – 2012-08-11 19:33:34

謝謝，但請參閱編輯我的問題。 – PeteGO 2012-08-11 21:22:02

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

我的建議是不是你加入後刪除「flip180」類的

來源

2012-08-11 19:37:02

謝謝，但請參閱編輯我的問題。 – PeteGO 2012-08-11 21:18:46

CSS3動畫填充模式：轉發

回答

相關問題