estoy haciendo una pequeña animacion con setIterval, por el momento todo bien..al click setInterval hace un callback a la funcion bounce. todo esto se dispara al evento click. me gustaria que la animacion dejara de correr al click de nuevo pero creo que no seria buena practica colocar el clearInterval dentro del mismo evento o quizas aun no entiendo bien el funcionamiento de este metodo.
let ball = document.getElementById('ball');
ball.addEventListener('click', () => {
setInterval(bounce, 500);
function bounce() {
ball.style.animation = 'bounce 1s';
ball.style.animationIterationCount = 'infinite';
}
});
aqui va el css:
@import url('https://fonts.googleapis.com/css?family=Montserrat');
h1, h2 {
font-family: 'Montserrat', sans-serif;
}
#ball {
width: 150px;
height: 150px;
margin: 0 auto;
margin-top: 400px;
background: purple;
border-radius: 100px;
}
@keyframes bounce {
0% {
margin-top: 400px;
}
50% {
margin-top: 300px;
}
100% {
margin-top: 400px;
}
}