css animation fast forward and rewind

Question

I was wondering if it was possible, using some javascript or jquery, to skip to the next, or go to the last part of a css animation. Lets say we have the following:

@keyframe effect{
    0%{opacity:1;}
    45%{opacity:1;}
    50%{opacity:0;}
    95%{opacity:0;}
    100%{opacity:1;}
}

that will fade something out and then back in

so lets say I made some buttons. How would I do the following:

$('#next').click(function(){
    //skip to the next animation part
});
$('#previous').click(function(){
    //skip to the previous animation part
});

@HamzaKubba the percentages represent the animation timeline — ahren, Oct 15 '13 at 03:43
Ah, actually that's a silly question, because I thought that was something custom the asker did, but it's actually some new CSS thing I didn't know about. :) — Hamza Kubba, Oct 15 '13 at 03:44
Hi may be ur task i s already done in this post check out..http://stackoverflow.com/questions/17644884/how-to-move-to-the-certain-keyframe-in-css3-animation — codebreaker, Oct 15 '13 at 03:45

score 1 · Answer 1 · answered Oct 15 '13 at 03:44

It's not really possible unless you break the CSS into different parts based on classes and then add/remove classes.

However, there is an absolutely fantastic javascript library called Greensock, that allows timeline-based animation - and in many cases is faster than CSS animations. It also has the benefit of being cross-browser compatible.

If you were, for example to create something similar using Greensock, it would look something like this:

var effect = new TimelineMax({paused:true});

effect.addLabel('start');
effect.to(
  '#myItem',
  1,
  {css:{opacity:1}}
);
effect.addLabel('step1');
effect.to(
  '#myItem',
  1, 
  {css:{opacity:0}}
);
effect.addLabel('end');

effect.play();

$('#gotoEnd').on('click', function(e){
  e.preventDefault();
  effect.seek('end');
});

score 0 · Answer 2 · answered Oct 15 '14 at 11:45

With the use of the animation-play-state Property, you can pause an animation and update the transform, then restart it.

element.style.webkitAnimationPlayState = "paused";
element.style.webkitAnimationPlayState = "running";

However you can't pause the animation, transform it, resume it, and expect it to run fluidly from the new transformed state.

At this time, there is no way to get the exact current "percentage completed" of a CSS keyframe animation. The best method to approximate it is using a setInterval or requestAnimationFrame.

This CSS tricks article explains this further, and gives an example of using setInterval. Another option is to use request animation frame

As mentioned GreenSock or Velocity are animation libraries which allow for extremely fast and smooth animations

css animation fast forward and rewind

2 Answers2