How to apply different animation on the same text when two different buttons are clicked

Question

I have a button that when clicked will display a <p> text <p/> element and I gave it an animation (going from top to bottom) but now I created another button that when clicked will delete the text in the <p> element I want to add an animation for when that happens, but when I code the CSS to animate the text when deleted, it seems to override the previous animation.

Is there an if else statement in CSS or can I do it in JavaScript? This is vanilla JavaScript and CSS.

<button class="button" onclick="Click()">click me</button>
<p id="appear" hidden>This text should appear on click</p>

<button class="butremove" onclick="ClickRemove()">click me to delete message</button>

@keyframes buttonappear { 
  0% {top: 10px;}
  100% {top: 175px;}
}

#appear {
  position: absolute;
  top: 175px;
  animation-name: buttonappear;
  animation-duration: 2.5s;
}

const Click = () => {
  document.getElementById("appear").style.display = "block";
}

const ClickRemove = () => {
  document.getElementById("appear").style.display = "none";
}

What CSS or JS code can I use to animate the text when it disappears without overriding the previous animation?