Animating and Fade Out keeps on center

Hi can I ask some help please, I want my balloon to fade out when it clicks, but the problem is when I click on it, it will go back to the center.

Here is my codepen

Thank you in advance.

You are changing the animation name so you lose the animation you had.

It looks like you can just fade out the before element with a transition.

e.g.

.balloon.burstboom:before {
  opacity: 0;
  /*animation: fade 2s linear;*/
  transition: 1s linear;
}
.balloon.burstboom button {
  color: transparent;
}
1 Like

Thank you so much @PaulOB :smiley: