Text animation before it disappears – Blancer.com Tutorials and projects

I made animations for text to appear and disappear, but I don’t know how to make it work correctly. Pls help. ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
My English is bad, so this is written by a google translateㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

<style>
@keyframes text-fade-in {
  0% {
    opacity: 0;
    transform: translateX(-10vw);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0vw);
  }
}
.text-fade-in {
  opacity: 0;
  animation-name: text-fade-in;
  animation-delay: 0.4s;
  animation-duration: 0.4s;
  animation-timing-function: easeOutCirc;
  animation-fill-mode: forwards;
}

@keyframes text-fade-out {
  0% {
    opacity: 1;
    transform: translateX(0vw);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(-10vw);
  }
}
.text-fade-out {
  opacity: 1;
  animation-name: text-fade-out;
  animation-delay: 0.4s;
  animation-duration: 0.4s;
  animation-timing-function: easeOutCirc;
  animation-fill-mode: forwards;
}
</style>

<body>
    <button onclick = "show('Text1'); hide('Text2'); hide('Text3')">Text1</button>
    <button onclick = "show('Text2'); hide('Text1'); hide('Text3')">Text2</button>
    <button onclick = "show('Text3'); hide('Text1'); hide('Text2')">Text3</button>
    <button onclick = "hide('Text1'); hide('Text2'); hide('Text3')">Hide all</button>

      <p class="text-fade-in" id = "Text1" style="display:none">Text1</p>
      <p class="text-fade-in" id = "Text2" style="display:none">Text2</p>
      <p class="text-fade-in" id = "Text3" style="display:none">Text3</p>
</body>

<script>
function hide(Id){
    document.getElementById(Id).style.display = "none";
}

function show(Id){
 document.getElementById(Id).style.display = "block";
}
</script>