question about animation
hi all,
so,
animation-delay
specifies the delay before the animation starts and NOT the delay in between iterations right?
how can i achieve the latter? a delay in between iterations13 Replies
I think you can only manage it within the keyframes
thanks to the 80%, 100%, the end state will take 20% of the animation-duration
So lets say the animation duration is 5s, the last second will do nothing
ah, i understand, nicely explained
thanks a lot! 🙂
Yeah this is how I do it. From what I found, It’s either this or have the animation direction set to “forward” instead of “infinite”(looping) so the animation runs once in the CSS. Then have JavaScript run an interval timer to remove and re-add the class linked to the animation. Pros and cons to each approach. The key frames method requires more math and making adjustments to the animation has to account for the delay time. (Example, if you want something to bounce up and be at the brightest height halfway through the animation.. 40% is your new middle and not 50%. The downside of the JS approach is that you have to switch out if your css file and workflow and keep a UI script in a separate place and there for remember it / document somewhere that the animation behavior is being effected by the JS. Plus you need to query selector the element, set up your interval function etc. not too bad. Maybe 4-5 lines of code or less but still has to be done instead of staying inside the CSS only. But it lets the animation exist between 0 and 100% still and give you really finite control over the repeat duration.
quick question, what if i wanted a short animation duration and a long delay between iterations?
is that possible?
wel it depends. you'll have to calculate the percentage of the total duration which the animation shoud take
let say you want a duration of 1s and 10s pause, the total duration is 11 second and the 1 second is
1 / 11 * 100 = 9.091
%
got you, thanks a lot again!
interesting btw, this feature seems quite useful, yet there's no dedicated animation property for it, something like:
animation-delay-between-iteration
or something like that.. wonder if it'll get added in future version of cssI’ve thought the same thing myself. Don’t overlook what I posted above though. Let’s say you want something to move up and down 6 pixels in 2 seconds, wait 4 seconds, and then start again (a full 6 second cycle).
Using what you and MarkBoots have been talking about, that css would look like:
Then you implement it and in theory you wanted that 2 second animation in the 6 second loop but now that you can see it, it doesn’t look right and you want to try out a 2 sec animation with a 3 sec delay between repeats so even though you calculated your 2 sec of movement as 1/3 of your repeat window (33.333%) and half of that, or one of the 6 seconds (16.666%), you have to do the math all over for 5 seconds. Now you need instead of 0,33.3333,100, and 16.6666, it’s 0,40,100, and 20
Doing this math over and over and keeping track of it all can be annoying. But bringing in JavaScript you can think of your problem more intuitively.
“Okay, I want a 2 second animation. I’ll just spec it as 2 seconds and then set the middle(50%) of it to the top of the jump
CSS:
Now you just need to set your 4 second pause and JavaScript can start the animation on a loop for you (keep in mind JS will use milliseconds so 1000 = 1s):
Now you just go into JavaScript and update your animation time and delay time. And just match your animation time in the css. You could even refactor this so that the Add and remove function only takes in one parameter, a string for class, and then does the document query selector for that class inside the function. Or even better, does a queryselector all and then adds and removes the class to all the elements on the page with a forEach loop. But see how this makes the problem mich more human-readable and understandable the way you think of it as a person instead of coding out the animation behavior to include the time its not moving? You see how complicated it was for a simple linear “jump” but imagine coding a more advanced animation that would need 5 or 6 keyframe behaviors on top of needing to pause between iterations. The JS saves the day.
thanks for your detailed explanation @rowe2ry! Although, I tried duplicating the JS part, and the syntax was off
here is the max i went in terms of correcting your syntax
but i didn't know how to go about fixing the
RemoveAndAddAnimation
part, do you mind letting me know how to go about that? thanksI’m sure it was. I wrote it on my phone at 3 am in bed while having trouble going back to sleep. Sorry that was misleading of me to write code on an iPhone in discord without testing it before sharing it. That was likely less than helpful. I’ll try to open my computer sometime today and compiling something that runs.
I was essentially just trying to make a function that takes in an html element and a string for a class name to toggle off and on again. I’ve been using C# for the past 3 months and almost no JavaScript so I’m betting I just messed up on one or more of the class methods or the syntax of writing out a function. Etc
I got this to work. My original intention isn't working because JS is removing and adding the class so close together that it doesn't "restart" animating like it should. The DOM doesn't truly see that the class went away but the class list is flashing in the dev tools to say something changed. Without some sort of async delay in there, this method works so long as the animation itself is less than half of the total time from animation start until its finished, and paused before starting again. Someone could maybe refactor this.
https://codepen.io/rowe2ry/pen/MWBBvWQ
thanks a bunch! 🙂
No problem! I’m actually thinking of a better way to do this in my head. I’m going to look into publishing an npm package or write a better function to help people do this.
My goal is that I create a function you pass 4 parameters into and call and it will take care of it for you.
• Param 1, animation time in ms
• Param 2, the pause between animation loops
• Param 3, class name of element to target
• class name with animation applied to toggle on and off
And I plan to remove the “animation time must be shorter than the delay” constraint I have in that code pen. I’ve wanted a solution to this problem myself, so I appreciate you raising the question as, when I did this in the past, I just did the key frames thing and it’s much less maintainable if you need to update the timing after bringing it to your dev team for feedback.
Improved functions tried and tested in codepen and then a link to a repo with the utility functions for 6 different scenarios.
https://codepen.io/rowe2ry/pen/MWBBvWQ
https://github.com/Rowe2ry/css-animaiton-loops
GitHub
GitHub - Rowe2ry/css-animaiton-loops: A utility to help front end d...
A utility to help front end developers creating looping animations - GitHub - Rowe2ry/css-animaiton-loops: A utility to help front end developers creating looping animations