Geek Answers Handbook

Javascript keyframe inverse animation

I am animating a block with a key frame, then running reverse animation in javascript, for example:

$('#block').removeClass('animate1').addClass('animate2');

With animate1 and animate2 corresponding to the two CSS classes causing the animation (just for demonstration, only in webkit) and #block simple div :

CSS

 .animate1 { -webkit-animation: shift 1s ease-in-out forwards; } .animate2 { -webkit-animation: shift 1s ease-in-out backwards reverse; } @-webkit-keyframes shift { from { left: 0px; } to { left: 200px; } }

HTML

 <div id="block" class="animate2"></div>

It just doesn't work. See this script for a demo (Chrome 30).

Data

If I run the animation the other way around, I mean the reverse first, then normal, it works correctly ( demo )

 $('#block').removeClass('animate2').addClass('animate1'); //Works.

It also works if I delete the current class and add the next class with independent functions caused by clicking on the buttons.

Can someone help me understand this strange behavior? I am stuck!

Edit

For future visitors, I'm no longer looking for a workaround, just trying to figure out what is going on here:

  • What is this "w70> time" required by the browser?
  • Why does this work in some way and not in another?
  • Why is animation running inside the inner closure?

If necessary, change the accepted answer.

+6
source share
2 answers

When you reuse an animation, sometimes you inherit its state.

How this happens is difficult to predict because it is not always consistent (I also think that the w3c standard does not establish exactly what should happen in this case).

In your case, you reuse the animation that should happen once (animation-iteration-count: initial, i.e. 1), and this has already happened once. So nothing happens. (It is true that another way works, but, as I said, this issue is not always agreed upon.)

One way to solve it is to reset.

 setTimeout(function () { $('#block').removeClass('animate1'); }, 1950); setTimeout(function () { $('#block').addClass('animate2'); }, 2000);

This leaves the div without any animation for a moment, and therefore reset effectively transitions. Now you have a problem when the div returns to its original state, so it is impossible to use it as it is; but I'm trying to explain why you have a problem.

A working solution can go through transitions, as Jacob says, or create different animations.

jumping demo

+3
source

CSS3 animations appear to be intended for one-time or infinitely looping animations, as suggested by the MDN "Using CSS Animations" developer guide ./p>

To keep the logic as you have, I switched to CSS3 transitions .

First, in CSS, specify two alternative “states” that our cat photo can be in (left or right):

 .transition1 { transition-property: left; transition-duration: 1s; left: 0px; } .transition2 { transition-property: left; transition-duration: 1s; left: 200px; }

Now, using your JS, with our renamed CSS classes:

 $('#swap1').click(function () { $('#block').removeClass('transition1').addClass('transition2'); }); $('#swap2').click(function () { $('#block').removeClass('transition2').addClass('transition1'); });

When a button is clicked, the (cat cat) left element will go from 0px to 200px (or vice versa) at a time. Here is my code: http://jsfiddle.net/u6jsC/ .

+1
source

More articles:


All Articles