How to smoothly revert CSS animation to its current state?

Question

I've got not animated element as default. There's also a trigger that lets me turn on & off animation on that element. The animation itself is very simple: moves element from left to the right and back.

When I stop animation, then my element obviously goes back to initial position. But it goes back suddenly, not smoothly. So it just changes its position from the one when I turned off animation to initial one. My question is: is there a way to stop it smoothly, so when I turn off the animation it goes back to initial position but smoothly/animating.

Here's my element and animation: http://jsfiddle.net/2Lwftq6r/

HTML:

<input type="checkbox" id="anim"> <label for="anim">Start / stop animation</label> <div></div> 

CSS:

div {      margin-top: 50px;     width: 50px; height: 10px;     background: #000;     transform: translateX(0); }  #anim:checked ~ div {     -webkit-animation: dance 2s infinite ease-in-out;     -moz-animation: dance 2s infinite ease-in-out; }  @-webkit-keyframes dance {   0%, 100% { -webkit-transform: translateX(0); }   50% { -webkit-transform: translateX(300px); } } @-moz-keyframes dance {   0%, 100% { -moz-transform: translateX(0); }   50% { -moz-transform: translateX(300px); } } 

Answer 1

I just had the same problem and I solved it by not using animation and it works perfectly! Check out my solution: So I had this spatula that I had to move when hovered over only, and I wanted it to transition back smoothly, so this is what I did:

#Spatula:hover{     animation-direction:alternate;     transform: translate(1.2cm,1cm);     transition: all 1.5s;     -webkit-transition: all 1.5s;  }  #Spatula{     -webkit-transition: all 1.5s;     transition: all 1.5s;  } 

Good luck!

Answer 2

You can't archive this effect only CSS3 way, but if you really need it, you could use jQuery + CSS3 Transitions. My solution (http://jsfiddle.net/sergdenisov/3jouzkxr/10/):

HTML:

<input type="checkbox" id="anim-input"> <label for="anim-input">Start / stop animation</label> <div class="anim-div"></div> 

CSS:

.anim-div {      margin-top: 50px;     width: 50px;     height: 10px;     background: #000; }      .anim-div_active {         -webkit-animation: moving 2s ease-in-out infinite alternate;         animation: moving 2s ease-in-out infinite alternate;     }      .anim-div_return {         -webkit-transition: -webkit-transform 0.5s ease-in-out;         transition: transform 0.5s ease-in-out;     }  @-webkit-keyframes moving {     0% { -webkit-transform: translateX(0); }     100% { -webkit-transform: translateX(300px); } }  @keyframes moving {     0% { transform: translateX(0); }     100% { transform: translateX(300px); } } 

Javascript:

$('#anim-input').on('change', function() {     var $animDiv = $('.anim-div');     if (this.checked) {         $animDiv.removeClass('anim-div_return')                 .addClass('anim-div_active');         return;     }      var transformValue = $animDiv.css('webkitTransform') ||                          $animDiv.css('transform');     $animDiv.css({'webkitTransform': transformValue,                   'transform': transformValue})             .removeClass('anim-div_active');      requestAnimationFrame(function() {         $animDiv.addClass('anim-div_return')                 .css({'webkitTransform': 'translateX(0)',                       'transform': 'translateX(0)'});     }); }); 

P.S. Vendor prefixes are based on actual browsers list from http://caniuse.com.