CSS动画 - 从中​​心成长

Question

希望一切都好.

我正在开发一款游戏,我想给一些盒子制作动画.

我希望一个盒子从小开始然后向外生长,所有边缘同时生长,其效果看起来像是从中心向外生长.

到目前为止,我所拥有的最佳动画如下:它可以根据需要增加框的高度和宽度,但是从左侧和顶部开始.我希望它从一个中心点开始.

我看了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;
    }
}

编辑:我的问题可能看起来像另一个类似的问题,但我只是想知道如何只使用关键帧.

谢谢,亚历克斯

Answer 1

您应该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>