html - 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!