I'd been trying to render a CSS animation but affected by external dynamic values handled by JavaScript, so now I'm wondering if there's any way to move step by step throw the keyframes of a CSS animations.
You can force an animation to start partway through by setting a negative animation delay.
(You would need to calculate the appropriate time value for the keyframe you want to display.)
Perhaps if you also set the animation state to paused, the animation would appear at the specified position, but would not move. I haven't tried it though!
Related
I'm trying to create an animated loader that is tied to the progress of another variable. In my case it's percent of an uploaded file completed, so it really just needs to follow a variable from 0% to 100% which I can simulate for the time being. However, all the CSS loader animations I can find control the animation using keyframes for the style of animation I'm using. It has to be a circular loader, not a bar or anything else.
So the first problem really is whether or not a CSS based loader can be controlled by an external variable, like a setInterval that counts from 0 to 100, and gets translated to a % of a degree, and then gives that to the animation.
I'm thinking this is not possible in a CSS based animation because of how keyframes work.
What might be another solution / approach?
I understand and use both transitions and animations, but it seems to me that there is a bit of a "hitch" as it were when trying to combine them. For example if you have an animation style that ends on a color, and sets the value indefinitely with -webkit-animation-fill-mode: forwards; it would make a lot of sense if I could smoothly transition from this state to another one if an overriding style could be set.
See jsfiddle. Note that toggling the yellow style uses the transition smoothly, but the use of animation can only smooth the initial 0-50% during the animation. There is no way to recover the final green state to either plain white or yellow background without an abrupt instant change that occurs when the animation value is unset. Note also that the animation, when active, completely overrides the !important style.
I don't know how much of this behavior is specified in the spec/WD/etc., but as far as I'm concerned this type of limiting behavior makes CSS animations next to worthless, and the animation would be advisable to perform step-wise from javascript, used with transitions. The downside to that is the greatly added overhead of doing it that way.
And to address the "unclear what I'm asking" vote, what I'm asking is how can I make an animation that can interpolate back out of the final animation state?
True, but have you tried use the value reverse in the animation-direction property for your animation?
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?
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 keyframe accordingly
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)
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.
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 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.
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/
I have a CSS3 position transition that makes a dive slide from one side to another when called by a JavaScript function (the function changes the value of style element "left"). This works great, but the CSS-transition also reacts to when a window is zoomed or resized, causing the div to appear in a faulty position for a second, before it transitions back to place.
Is there any way to only make it react only to my function, or do I have to do it the old fashion way, making a JavaScript transition?
Edit: You can find my code here: http://jsfiddle.net/PURFp/
You can add the transition property right before you start the animation and remove it after the animation has ended. Here's a demo : http://jsfiddle.net/PURFp/2/.
When running a Jquery animation like slideDown(), it looks like a number of element-specific css properties is set to be updated at a specific interval and when the animation is complete these properties are unset and the display property is simply set to auto or whatever. At least in firebug you can't see those temporary properties any more.
The problem I've encountered is the scenario where we stop the slide down with stop(). The element is then left with the current temporary css values. Which is fine because it has to, but let us say that I stoped the slidedown because I have decided to slide it back up again a bit prematurely. It would look something like this:
$(this).slideDown(2000)
//The below events is not in queue but will rather start execute almost
simultaneously as the above line. (dont remember the exact syntax)
$(this).delay(1000).stop().slideUp(2000)
The above code might not make much sense, but the point is:
After 1 second of sliding down the animation is stopped and it starts to slide back up. Works like a charm.
BUT!!! And here is the problem. Once it it has slid back up the elements css properties are reset to the exact values it had 1000ms into the slideDown() animation (when stop() was called). If we now try to run the following:
$(this).slideDown(2000)
It will slide down to the very point the prior slideDown was aborted and not further at half the speed (since it uses the same time for approximately half the height). This is because the css properties were saved as I see it. But it is not especially wished for. Of course I want it to slide all the way down this time.
Due to UI interaction that is hard to predict everything might soon break. The longer animations we use increases the risk of something like this happening.
Is this to be considered a bug, or am I doing something wrong? Or maybe it's just a feature that is not supported?
I guess I can use a callback function to reset the css properties, but depending on the animation used, different css properties are used to render it, and covering your back would result in quite a not-so-fancy solution.
You could try to replace the slideUp and slideDown with animate.
http://api.jquery.com/animate/
This way, you are explicitly telling it what to do.
This is the expected (though not desirable) behavior...to get the .slideDown() to go to the full height, start the slides from the finished position, by using .stop(true, true), so the animation completes. The second true argument, telling it to skip to the end of the animation is the important part here, so those "final" values it slides back to are the full height, etc...rather than the height it was at when it stopped sliding.
This was a bug that has been fixed in jQuery 1.7.2: http://bugs.jquery.com/ticket/8685