анимация на моей кнопке повторяется сразу после того, как я убрал с нее курсор

Question

Итак, у меня есть эта кнопка, где я анимировал ее, чтобы подождать пару секунд, прежде чем она появится, и заставить ее делать эффект зависания, когда вы go нажимаете на нее. Кнопка работает отлично, она появляется, когда я хотел, и она действует, когда я на нее наводю, но как только я убираю курсор после наведения на нее, она повторяет анимацию, которая заставляет кнопку исчезать на некоторое время Я установил это, чтобы ждать, прежде чем появиться. Вот проект, если вы хотите посмотреть на него: https://samrafiei.github.io/project0/home.html Вот код для кнопки:

#btnd{
  width:50px;
  height:50px;
  background-image:url("media/down-arrow.png");
  background-size:45px 45px;
  background-repeat: no-repeat;
  background-color: transparent;
  border:0;
  position:relative;
  -webkit-animation:hbt 12.5s ease forwards;


}
#btnd:hover{
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hbt{
  0% {
    transform: scale(0);
    transition: transform ease-out 0s;}
  76%{
    transform: scale(0);
  }
  100%{
    transform: scale(1);

  }
}

<button id="btnd">button</button>

Спасибо за любую помощь: ')