Tushar Saurabh Tushar Saurabh - 9 months ago 63
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


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

function animation_end() {

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 Source

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.