Question

我有由滚动行为触发的CSS关键帧动画。如果用户滚动太快，我希望能够将一些动画发送到他们的“完成/最终”动画中。使用JavaScript的状态，因为动画相互构建。

假设我有一个3000ms的动画，我决定在1500ms过后我想完成 - 是否可以强制使用JS来提前完成这个CSS关键帧动画？

** PS - 我不谈论使用转发填充模式保留最终帧的属性。

谢谢！

Answer 1

是的，只需更改动画持续时间即可更快地结束动画，

elementWithAnimation.style.animationDuration="1500ms";

您需要浏览器前缀，例如webkit：

elementWithAnimation.style.webkitAnimationDuration="1500ms";

Answer 2

如何使用类来控制这样的状态：

.play{
  animation: animationFrames ease 5s;
  -webkit-animation: animationFrames ease 5s;
  -moz-animation: animationFrames ease 5s;
  -o-animation: animationFrames ease 5s;
  -ms-animation: animationFrames ease 5s;
}

.end{
    transform:  translateX(100px);
    -moz-transform:  translateX(100px);
    -webkit-transform:  translateX(100px);
    -o-transform:  translateX(100px);
    -ms-transform:  translateX(100px);
}

的JavaScript

$('#end').click(function(){
    $('#box').removeClass('play').addClass('end');
});

http://jsfiddle.net/a2Gsh/

你能用力吗？使用JavaScript的CSS关键帧动画到它的最终状态？

2 个答案: