Can you 'force' a CSS keyframe animation to it's final state using JavaScript?

Question

I have CSS keyframe animations that are triggered by scroll behavior. If the user is scrolling too fast, I'd like to be able to send some of the animations to their 'finished/final' state using JavaScript given that the animations build off of each other.

Say I have a 3000ms animation that I decide I want to finish after 1500ms has passed -- Is it possible to force this CSS keyframe animation to finish early using JS?

** PS -- I'm not talking about persisting the final frame's properties using the forwards fill-mode.

Thanks!

Answer 1

How about using class to control status like this:

.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/

Answer 2

Yes, simply change the animation duration to conclude the animation faster,

elementWithAnimation.style.animationDuration="1500ms";

You will need browser prefixes, for example for webkit:

elementWithAnimation.style.webkitAnimationDuration="1500ms";