Animating and Fade Out keeps on center

HTML & CSS
1

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.

2

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
3

Thank you so much @PaulOB :smiley:

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.