如何(动画)从中心而不是从左侧向外扩展

<div class="container">
  <div class="animation"></div>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.animation {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: #ff0000;
  transform: translate(-50%, -50%);
  transition: width 1s ease-out, height 1s ease-out;
}

.animation::before,
.animation::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: #ff0000;
  transform: translate(-50%, -50%);
  transition: width 1s ease-out, height 1s ease-out;
}

@keyframes expand {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 200px;
    height: 200px;
  }
  100% {
    width: 0;
    height: 0;
  }
}

.animation:hover {
  animation: expand 2s infinite;
}

.animation:hover::before,
.animation:hover::after {
  animation: expand 2s infinite;
}