Button trigger animation CSS only-CodePudding

I've been working on this game where you click on ghosts and they disappear. I'm not very good at JavaScript, found a way to do the animation triggered by a button using only CSS. The problem is that when I clicked on the ghost it disappeared, but when I click again the ghost reappears. I think it's because I'm using focus, but I'm not sure. If there is a way to fix this without using JavaScript that would be great.

``` div {
  text-align: center;
}

.ghost1 {
  font-size: 14px;
  border-radius: 50px;
  border: none;
  background-color: transparent;
}

.ghost2 {
  font-size: 14px;
  border-radius: 50px;
  border: none;
  background-color: transparent;
}

@keyframes ghost1 {
  0% {
    font-size: 14px;
  }
  100% {
    font-size: 0px;
  }
}

#btn1:focus {
  animation-name: ghost1;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes ghost2 {
  0% {
    font-size: 14px;
  }
  100% {
    font-size: 0px;
  }
}

#btn2:focus {
  animation-name: ghost2;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

<button class="ghost1" id="btn1">