CSS 动画 - 从中​​心增长（从中心点缩放到整个容器）

我正在开发一款游戏，我想为一些盒子制作动画。

我想要一个盒子从小处开始，然后向外生长，所有边缘同时生长，看起来就像从中心向外生长的效果。

到目前为止，我拥有的最好的动画如下：它根据我的需要增加盒子的高度和宽度，但从左侧和顶部开始。我希望它从一个中心点开始。

我查看了 W3 上的动画属性，似乎没有任何内容适合这艘船。

  .box_2_gen{
    
    animation-duration: 0.25s;
    animation-name: createBox;

    position: relative;

    background: #FFEDAD;

    border: black solid;
    border-width: 1px;
    border-radius: 15px;

    width: 98px;
    height: 98px;

    margin: 10px;

    float: left;
}



@keyframes createBox{
    from{
        height:0px;
        width: 0px;

    }
    to{
        height: 98px;
        width: 98px;
    }
}

编辑：我的问题可能看起来像是另一个类似的问题，但我只是想知道如何仅使用关键帧来做到这一点。

Thanks,

你应该使用transform在动画中获得更好的性能和更多的控制。那么你就不必重复静态px值，您可以使用transform-origin控制变换发生的位置。scale()默认情况下将从中心缩放。

div {
  background: red;
  animation: createBox .25s;
  width: 98px; height: 98px;
}
@keyframes createBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

<div></div>