How about using class to control status like this:
.play{
animation: animationFrames ease 5s;
-webkit-animation: animationFrames ease 5s;
-moz-animation: animationFrames ease 5s;
-o-animation: animationFrames ease 5s;
-ms-animation: animationFrames ease 5s;
}
.end{
transform: translateX(100px);
-moz-transform: translateX(100px);
-webkit-transform: translateX(100px);
-o-transform: translateX(100px);
-ms-transform: translateX(100px);
}
JavaScript
$('#end').click(function(){
$('#box').removeClass('play').addClass('end');
});