How to pause css animation at orginal state

Question

I'm using this animation for ajax loader: http://codepen.io/hericdk/pen/niweF Now when ajax call is finished I'd like animated gif to change to "check mark" then i want animation to pause and then slowly fade out so i do :

$('.spinner').css("background-image", "url('/img/complete.png')");
$('.spinner').addClass("animationpaused");
$('.spinner').fadeOut(800);

where animationpaused css is :

.animationpaused{
  -webkit-animation-play-state:paused !important;
  -moz-animation-play-state:paused !important;
  -o-animation-play-state:paused !important;
  animation-play-state:paused !important;
}

Problem is sometimes I can get "check mark" icon to pause upside down. How can I pause CSS animation and be sure it pauses in original state so my icon will never pause upside-down?

Edit: I've added fiddle to make this more clear: http://jsfiddle.net/oL31LwdL/1/ Basicly after clicking stop button I'd like animation to continue to 1st frame and then stop so check icon will be in its original position.

Answer 1

You can add animation-fill-mode. In your case you probably need:

animation-fill-mode: none; 

Find more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode