Почему я не нацеливаюсь на кнопку в моем div?

Question

Я не уверен, почему моя кнопка не анимируется должным образом.Я думаю, что это связано с таргетингом.Я пытаюсь нацелиться на кнопку, которая находится внутри моих элементов div, когда я наводю курсор мыши на элемент div:

.homePageDiv:hover>.homePageButton {
  animation: pulsingButton 2s linear infinite;
}

@keyframes pulsingButton {
  0%,
  50%,
  100% {
    height: 100px;
    width: 100px;
  }
  25% {
    height: 150px;
    width: 150px;
  }
  75% {
    height: 50px;
    width: 50px;
  }
}

<div id="aboutMeDiv" class="homePageDiv">
  <button id="aboutMeBtn" class="homePageButton">
			<span id = "aboutMe">About Me</span>
		</button>
</div>

<div id="notesDiv" class="homePageDiv">
  <button id="notesBtn" class="homePageButton">
			<span id = "notes">Notes</span>
		</button>
</div>

<div id="projectsDiv" class="homePageDiv">
  <button id="projectsBtn" class="homePageButton">
			<span id = "projects">Projects</span>
		</button>
</div>

Answer 1

.homePageDiv:hover>.homePageButton {
    animation: pulsingButton 2s linear infinite;
  }
  .homePageDiv {
    display: inline;
  }
  
  @keyframes pulsingButton {
    0%,
    50%,
    100% {
      height: 100px;
      width: 100px;
    }
    25% {
      height: 150px;
      width: 150px;
    }
    75% {
      height: 50px;
      width: 50px;
    }
  }

<div id="aboutMeDiv" class="homePageDiv">
        <button id="aboutMeBtn" class="homePageButton">
                  <span id = "aboutMe">About Me</span>
              </button>
      </div>
      <br>
      <div id="notesDiv" class="homePageDiv">
        <button id="notesBtn" class="homePageButton">
                  <span id = "notes">Notes</span>
              </button>
      </div>
      <br>
      <div id="projectsDiv" class="homePageDiv">
        <button id="projectsBtn" class="homePageButton">
                  <span id = "projects">Projects</span>
              </button>
      </div>