How to restart a keyframe animation with setInterval?

Question

I've been trying to find an answer to my problem but I haven't been able to find one.
I want to be able to clear an interval once it's done, but then be able to restart it.
My current code doesn't let me do that: once the interval stops, you can't run it again.
Here's my code:

 function about() { var about = document.getElementById("about") about.classList.add("about-mi") var moreinfo = setInterval (function() { about.classList.remove("about-mi") }, 2000) clearInterval(moreinfo) }

 .about-mi { animation-name: moreinfo; animation-duration: 2s; } @keyframes moreinfo { 0% {color: black;} 50% {color: red; transform: translateY(-20px);} 100% {color: black;} }

 <a onclick="about()">▼</a> <h2 id=about>About</h2>

I would prefer solutions that only require HTML, CSS, or JavaScript, but I am also open to try solutions that require jQuery.

Answer 1

Actually setInterval doesn't do anything here. You don't need to use interval for that, just use setTimeout .

 function about() { var about = document.getElementById("about") about.classList.add("about-mi") var moreinfo = setTimeout(function() { about.classList.remove("about-mi") }, 2000) }

 .about-mi { animation-name: moreinfo; animation-duration: 2s; } @keyframes moreinfo { 0% { color: black; } 50% { color: red; transform: translateY(-20px); } 100% { color: black; } }

 <a onclick="about()">▼</a> <h2 id=about>About</h2>

Also you can do this with only CSS

 .about-mi { animation: moreinfo 2s, reset 2.1s; } a:active+.about-mi { animation: anything, reset 2.1s; } @keyframes moreinfo { 0% { color: black; } 50% { color: red; transform: translateY(-20px); } 100% { color: black; } } @keyframes reset { from, to { color: black; transform: unset; } }

 <p>Wait for the animation to finish before first clicking (2.1s). because the animation starts when the page loads.</p> <a href="#">▼</a> <h2 id="about" class="about-mi">About</h2>

Answer 2

As you use the interval timeout to remove the class about-mi to match with the 2 seconds you have defined in your css with animation-duration: 2s; it gets hard to mantain when you start changing one of those values you always have to keep in mind ooooh I also have to update the other one say javascript value and css value

That given, in this case another approach is remove the class based on HTMLElement: animationend event like so:

 var aboutElement = document.getElementById("about") function about() { aboutElement.classList.add("about-mi") } aboutElement.addEventListener("animationend", function(){ aboutElement.classList.remove("about-mi"); });

 .about-mi { animation-name: moreinfo; animation-duration: 2s; } @keyframes moreinfo { 0% {color: black;} 50% {color: red; transform: translateY(-20px);} 100% {color: black;} }

 <a onclick="about()">▼</a> <h2 id=about>About</h2>

Answer 3

In your specific case, it looks like you only need to run the code once, and not multiple times at intervals, so as @dgknca mentioned, all you need is a setTimeout .

---

How to restart an interval in general

Answering this in case other users comes across this post. The best you can do (as far as I'm aware) is to define a non-anonymous function with the functionality you want, and then use that in the interval:

function doSomething() {
    // your logic here
    console.log('I am doing something.');
}

// execute doSomething every 1 second
var interval = setInterval(doSomething, 1000);

Like so, you can cancel the interval using:

clearInterval(interval);

To "restart" the interval, you would need to assign interval to a new interval:

interval = setInterval(doSomething, 1000);