Tushar Saurabh Tushar Saurabh - 26 days ago 14
CSS Question

Jquery/CSS - transform:rotate(0deg) not working

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

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.