如何让太多的按钮在屏幕上并排并在屏幕下方颤动？

<div class="button-container">
  <button class="button">按钮1</button>
  <button class="button">按钮2</button>
  <button class="button">按钮3</button>
  <!-- 添加更多按钮... -->
</div>

.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  height: 100vh;
}

.button {
  margin: 10px;
  padding: 10px 20px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 5px;
  animation: shake 0.5s infinite alternate;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}