Question

背景：我正在制作一个基本的动画，在一个男孩的身影中走到一个女孩的身影并停下来。我正在使用CSS3- translate来实现它。为了阻止手和腿移动，我正在使用Javascript事件 -

boy.addEventListener("webkitAnimationEnd", animation_end);

和最后的Jquery

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

我希望双腿伸直，但它是交叉的。

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

问题：Jquery中的CSS函数无效。腿仍然交叉。腿应该是直的。

请告诉我如何解决？

浏览器 - Safari。

整个代码 - http://codepen.io/tusharsaurabh/pen/QKXXmY

请注意 - 1.我的代码混合了Jquery和Javascript，因为我从Javascript开始，但为了解决这个问题，我尝试了很多东西，然后慢慢转移到Jquery。

Answer 1

当您将'animation-play-state'的值更改为'paused'时，变换将保持其在同一时刻的值。

要删除该值，您可以将“animation-iteration-count”更改为1，或通过将其值更改为“none”来删除动画。但请注意，价值不会过渡，只会跳跃。

Jquery / CSS - 转换：rotate（0deg）无效

1 个答案: