CODEWITHSUNDEEP
jqueryanimationcss
PeteGO
PeteGO

Reputation: 5791

CSS3 animation-fill-mode: forwards

Just using Google Chrome at the moment.

I thought that adding -webkit-animation-fill-mode: forwards; would persist the end state of an animation.

See example here.

Why isn't the image staying at -180 degrees?

EDIT: I want the animation to be able to run again, with things as they are at the end of the last animation. This is a simplified version of the problem - the actual problem rotates 15 degrees, and I want the image to be rotated a further 15 degrees on each run. If I don't remove the class the 2nd click of the button does not do anything.

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');
        });
    });
});​

Upvotes: 2

Views: 2014

Answers (1)

Soheil
Soheil

Reputation: 5364

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

My advice is not to remove the "flip180" class after you added to your class

Upvotes: 1

Related Questions