jQuery / CSS-transform：rotate（0deg）不起作用

Question

Context: I am creating a basic animation, where in a boy figure walks upto a girl's figure and stops. I am using CSS3- translate to achieve it. To stop the hand and leg from moving I am using Javascript event -

boy.addEventListener("webkitAnimationEnd", animation_end);

and the finally Jquery

$('#boy-right-leg').css('-webkit-animation-play-state','paused');

I want the legs to be straight, however it is crossed.

function animation_end() {
  $('#boy-right-leg').css('-webkit-animation-play-state','paused');
  $('#boy-left-hand').css('-webkit-animation-play-state','paused');
  $('#boy-left-leg').css('-webkit-animation-play-state','paused');
  $('#boy-right-leg').css('-webkit-transform','rotate(0deg)');
  $('#boy-left-leg').css('-webkit-transform','rotate(0deg)');
}

Issue: The CSS function in Jquery is not working. The legs are still crossed.The legs should be straight.

Please let me how to fix it?

Browser - Safari.

whole code - http://codepen.io/tusharsaurabh/pen/QKXXmY

Please note - 1. My code has mix of Jquery and Javascript, as I started with Javascript but to solve the issue I tried many things and slowly moved to Jquery.

Answer 1

When you change the value of 'animation-play-state' to 'paused' the transform stays with the value it has at that same moment.

To remove that value you can change the 'animation-iteration-count' to 1 for example, or remove the animation by changing its value to 'none'. But notice the value wont transition, it will simply jump.