Not play animation first time after page load CSS

Question

Good day to all Is there a way to not play animation after page load? Without JS and CSS transition. Searched here and couldn't find an answer. I sketched a small example where you can clearly see this problem. See code below.

.tooltip {
  position: absolute;
  animation: fadeOut forwards alternate .8s;
  background-color: #f00;
  color: #fff;
  padding: 20px;
}

button:hover .tooltip {
  animation: fadeIn forwards alternate .8s;
}

@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
    top: 100px;
    left: 100px;
  }
  1% {
    display: block;
    opacity: 0;
    top: 100px;
    left: 100px;
  }
  100% {
    display: block;
    opacity: 1;
    top: 0px;
    left: 0px;
  }
}

@keyframes fadeOut {
  0% {
    display: block;
    opacity: 1;
    top: 0px;
    left: 0px;
  }
  99% {
    display: block;
    opacity: 0;
    top: 100px;
    left: 100px;
  }
  100% {
    display: none;
    opacity: 0;
    top: 100px;
    left: 100px;
  }
}

<button>
    <span>text</span>
    <span class="tooltip"><a href="#">press my</a></span>
</button>

Thanks in advance.