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

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.

Alvaro · Accepted Answer · 2016-11-12 17:30:02Z

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.

answered Nov 12, 2016 at 17:30

Alvaro

9,81210 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related