使用css对进入并动态观察中心图形的图形进行动画处理

<div class="container">
  <div class="center-shape"></div>
  <div class="entering-shape"></div>
</div>

.container {
  width: 400px;
  height: 400px;
  position: relative;
}

.center-shape {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.entering-shape {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  animation: entering-animation 2s infinite;
}

@keyframes entering-animation {
  0% {
    top: 0;
    left: 0;
  }
  50% {
    top: 50%;
    left: 50%;
  }
  100% {
    top: 0;
    left: 0;
  }
}