Why if I click the button the second time it doesn't work?

Question

https://code.sololearn.com/WT7debW9ibKh/?ref=app

Answer 1

my previous post was answering your initial question (why animation works only once)...

as you've edited your question, here's my second answer:

button click works only once, because you must remove the animation property before applying it another time...

simple fix:

function startAnimation() {
ovale1.style.animation = ovale2.style.animation = "";
setTimeout(function() {
ovale1.style.animation="oval1 1s 4 linear";
ovale2.style.animation="oval2 1s 4 linear";
},50);
}

better fix would be to make use of 'animationend' event handlers to reset the animation property ^^

Answer 2

function startAnimation() {
ovale1.style.animation="oval1 1s 4 linear";
ovale1.style.animationIterationCount = "infinite";
ovale2.style.animation="oval2 1s 4 linear";
ovale2.style.animationIterationCount = "infinite";
}

Answer 3

Thank you!