JQuery/CSS - transformieren: drehen (0deg) funktioniert nicht

Question

Kontext: Ich erstelle eine grundlegende Animation, wo in einem Jungen Figur geht zu einer Mädchenfigur und stoppt. Ich verwende CSS3-translate, um es zu erreichen. Um die Hand und Bein zu stoppen ich bewegt bin mit Javascript-Ereignis -

boy.addEventListener("webkitAnimationEnd", animation_end); 

und schließlich JQuery

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

Ich möchte die Beine gerade sein, aber es wird gekreuzt.

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)'); 
} 

Problem: Die Funktion CSS in JQuery funktioniert nicht. Die Beine sind immer noch gekreuzt. Die Beine sollten gerade sein.

Bitte lassen Sie mich, wie Sie es beheben?

Browser - Safari.

gesamte Code - http://codepen.io/tusharsaurabh/pen/QKXXmY

Bitte beachten Sie - 1. Mein Code hat Mischung aus JQuery und Javascript, wie ich mit Javascript gestartet, aber das Problem habe ich versucht, viele Dinge zu lösen und bewegte sich langsam auf JQuery.

Answer 1

Wenn Sie den Wert von 'animation-play-state' in 'paused' ändern, bleibt die Transformation mit dem Wert, den sie im selben Moment hat.

Um diesen Wert zu entfernen, können Sie die 'Animation-Iteration-Anzahl' beispielsweise auf 1 setzen oder die Animation entfernen, indem Sie ihren Wert auf 'keine' ändern. Aber beachten Sie den Wert wird nicht Übergang, es wird einfach springen.