Kevin Powell - Community•2y ago

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 iterations

13 Replies

MarkBoots•2y ago

I think you can only manage it within the keyframes

@keyframes sample{
  0% {
    /*start styles*/ 
  }
  80%, 100% { 
    /*end styles*/
  }
}

@keyframes sample{
  0% {
    /*start styles*/ 
  }
  80%, 100% { 
    /*end styles*/
  }
}

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

son argOP•2y ago

ah, i understand, nicely explained thanks a lot! 🙂

Rowe2ry•2y ago

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.

son argOP•2y ago

quick question, what if i wanted a short animation duration and a long delay between iterations? is that possible?

MarkBoots•2y ago

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%

@keyframes sample{
  0% {
    /*start styles*/ 
  }
  9.091%, 100% { 
    /*end styles*/
  }
}

@keyframes sample{
  0% {
    /*start styles*/ 
  }
  9.091%, 100% { 
    /*end styles*/
  }
}

son argOP•2y ago

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 css

Rowe2ry•2y ago

I’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:

.active {
    animation: jump 6s linear infinite;
}

@keyframes jump {
    0%, 33.333%, 100%{
        transform: translateY(0);
    }

    16.66666% {
        transform: translateY(-6pm);
    }
}

.active {
    animation: jump 6s linear infinite;
}

@keyframes jump {
    0%, 33.333%, 100%{
        transform: translateY(0);
    }

    16.66666% {
        transform: translateY(-6pm);
    }
}

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:

.active {
    animation: jump 2s linear forwards;
}

@keyframes jump {
    0%, 100%{
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6pm);
    }
}

.active {
    animation: jump 2s linear forwards;
}

@keyframes jump {
    0%, 100%{
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6pm);
    }
}

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):

const animationElement = document.QuerySelector(“.active”);
const animationTime = 2000;
const delayBetweenIterations = 4000;

const RemoveAndAddAnimation =(element, class) => {
    element.ClassList.Remove(class);
    element.ClassList.Add(class);
}

animationTimer = SetInterval(RemoveAndAddAnimation(animationElement, “active”), (animationTime + delayBetweenAnimations));

const animationElement = document.QuerySelector(“.active”);
const animationTime = 2000;
const delayBetweenIterations = 4000;

const RemoveAndAddAnimation =(element, class) => {
    element.ClassList.Remove(class);
    element.ClassList.Add(class);
}

animationTimer = SetInterval(RemoveAndAddAnimation(animationElement, “active”), (animationTime + delayBetweenAnimations));

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.

son argOP•2y ago

thanks for your detailed explanation @rowe2ry! Although, I tried duplicating the JS part, and the syntax was off

const animationElement = document.querySelector('.active');
const animationTime = 2000;
const delayBetweenIterations = 4000;

const RemoveAndAddAnimation =(element, class) => {
    element.ClassList.Remove(class);
    element.ClassList.Add(class);
    
}

setInterval(RemoveAndAddAnimation(animationElement, 'active'), (animationTime + delayBetweenIterations));

const animationElement = document.querySelector('.active');
const animationTime = 2000;
const delayBetweenIterations = 4000;

const RemoveAndAddAnimation =(element, class) => {
    element.ClassList.Remove(class);
    element.ClassList.Add(class);
    
}

setInterval(RemoveAndAddAnimation(animationElement, 'active'), (animationTime + delayBetweenIterations));

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? thanks

Rowe2ry•2y ago

I’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

Rowe2ry•2y ago

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

Rowe2ry

CodePen

MWBBvWQ

...

son argOP•2y ago

thanks a bunch! 🙂

Rowe2ry•2y ago

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.

Rowe2ry•2y ago

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

Rowe2ry

CodePen

Animation Loop JS

...

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

Gaming

Programming

question about animation