来回动画div

Question

I'm not an expert dev. I was looking for a little help.

I was trying to make a div move back and forth using toggleClass;

$('div').on('click', function() {
    $(this).toggleClass('active');
});

and keyframes;

.active {
    animation-name: moveme;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes moveme {
    0%  {transform: translate(0,0)}
    50%  {transform: translate(-200px, 0px)}
    100%  {transform: translate(-200px,-50px);}
}

Now, when the div goes back to its previous position, it doesn't animate. I want the div to animate with the same animation but backwards. How can I do that?

Here you can see what I'm trying to accomplish jsfiddle.net/jmrMW/43/ I just made a simple animation for the sake of the example, but it's going to be more complex in the future.

Thank you in advance ^^

Answer 1

Here's a fork of your JSFiddle. Pretty much just duplicated what you already had for keyframes but applied it in reverse :)

 $('div').on('click', function() { if ( $(this).hasClass("go-up") ) { $(this).removeClass("go-up").addClass("go-down"); } else { $(this).addClass("go-up").removeClass("go-down"); } }); 

 div{ background:#aaa; width: 200px; margin: 20vh auto; height: 200px; } .go-up { animation-name: moveup; animation-duration: 1s; animation-timing-function: linear; animation-delay: 0s; animation-fill-mode: forwards; } .go-down { animation-name: movedown; animation-duration: 1s; animation-timing-function: linear; animation-delay: 0s; animation-fill-mode: forwards; } @keyframes moveup { 0% {transform: translate(0,0)} 50% {transform: translate(-100px, 0px)} 100% {transform: translate(-100px,-50px);} } @keyframes movedown { 0% {transform: translate(-100px,-50px);} 50% {transform: translate(-100px, 0px)} 100% {transform: translate(0,0)} } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div></div> 

http://jsfiddle.net/jmrMW/43/

Answer 2

Javascript adds and removes classes instantly. And your CSS binds the animation only to .active class, so when you click second time - you loose your class - you loose the slight animation.

Now, you can duplicate everything as people mentioned before me, but come on! Programmers never duplicate, they utilize. Isn't it a good idea to discover all the power of CSS3 animations?

So, I'd like to suggest another approach: to set animation-direction: alternate and animation-play-state: paused . Then define CSS class for moving, either way:

.moving {
  animation-play-state: running;
}

And then, apply it to the given element for only 1 sec after it has been clicked:

var $moveable = $( '.moveable' ).eq( 0 );

$moveable.click(function() {
    $moveable.addClass( 'moving' );
    setTimeout(function() {
         $moveable.removeClass( 'moving' );
    }, 1000);
});

See fiddle.

Update

This solution has a major downside - using timers in both JS and CSS which obviously won't match. Animation is now infinite, so each time it goes little bit further than should. But we can increment animation-iteration-count to disable animation proceeding to the next cycle. Hope that's still fun!

See fiddle.