CODEWITHSUNDEEP
javascriptcssanimationcss-animations
aushilfe444
aushilfe444

Reputation: 145

keep css animation state

i'm applying a css keyframe animation to an element. i only specify one keyframe (100%) for a simple transform. while the animation is running i pause using the animation playstate and apply a class specifying a different keyframe animation. what i want is that the second animation starts where the first animation was interrupted but instead the element jumps back to its start position and is animated from there. i played a bit with animation-fill-mode but it doesnt change which i think is because the animation was interrupted before it reached 100%. any ideas what i could do to make this work?

Upvotes: 0

Views: 725

Answers (3)

brianskold
brianskold

Reputation: 972

You have a few options here:

  1. Append the new animation to the list with a different play state. This is not very scalable but works for some cases.
  2. Capture the animated value using getComputedStyle and apply it yourself. The disadvantage of this is that for transform, the value returned by getComputedStyle is converted to a matrix() value so the interpolation for rotate animations will sometimes behave differently.
  3. Use commitStyles() to do it for you. The trouble with this is browser support. It should work in the latest Firefox and Safari, and next version of Chrome (works for me in Canary).

You can see each approach demonstrated here: https://jsfiddle.net/birtles/8bv5of6n/14/

Upvotes: 0

Samuel Reid
Samuel Reid

Reputation: 1766

http://jsfiddle.net/gxve9/1/

Animations don't actually change the css, they just animate it and then put it back where it was. You just have to use javascript to save the css using something like

var prevWidth = $("div").css("width");

and then after pausing the animation, set it with

$("div").css("width",prevWidth);.

That way it stays permanently set where the first animation put it.

Upvotes: 0

Zachary Kniebel
Zachary Kniebel

Reputation: 4794

I was actually brainstorming this a couple of days ago. You are correct in assuming that your issue is the result of your animation not reaching 100%. The problem is that there is no way to simply select the values indicating how far your animation made it in the animation. From this, you have the following three options (note: I have not tested all of them):

  1. You can break the animation into defined steps (10% intervals, 20% intervals, etc.) and then only pause it on one of the steps. This is probably the safest solution, but you will likely have to base it on time (i.e., setInterval, etc. - Yuck!)
  2. You can calculate (also based on time - Double Yuck!) where the element is, using JavaScript, and set up a new keyframe accordingly
  3. You can try to look at the element's properties at the time that the animation is paused (I have not tried this and I highly doubt it will work)

Upvotes: 0

Related Questions