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?
1
-
I'm not sure if this is how animations are supposed to work. Why do you change the class halfway into the animation? If you want a complex animation simply make a complex animation using more keyframes.Halcyon– Halcyon2013-07-02 17:13:08 +00:00Commented Jul 2, 2013 at 17:13
Add a comment
|
3 Answers
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):
- 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!) - You can calculate (also based on time - Double Yuck!) where the element is, using JavaScript, and set up a new
keyframeaccordingly - 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)
1 Comment
brianskold
"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)" - This absolutely works. You don't even need to pause the animation. All browsers will provide the animated value via
getComputedStyle.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.
Comments
You have a few options here:
- Append the new animation to the list with a different play state. This is not very scalable but works for some cases.
- Capture the animated value using
getComputedStyleand apply it yourself. The disadvantage of this is that fortransform, the value returned bygetComputedStyleis converted to amatrix()value so the interpolation for rotate animations will sometimes behave differently. - 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/
