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;
    }
}

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

---

谢谢，Alex

您应该在动画中使用

transform

，以获得更好的性能和更多的控制。这样，您就不必重复静态

px

值，并且可以使用

transform origin

来控制变换发生的位置<默认情况下，代码>缩放（）将从中心缩放

div{
背景：红色；
动画：createBox.25s；
宽度：98px；高度：98px；
}
@关键帧createBox{
从{
变换：比例（0）；
}
到{
变换：比例（1）；
}
}

---

这里是一个完整的示例。我是为自己创作的，在玩迈克尔·科克的StackSnippet时——但我想我还是要分享一下

/*仔细看：这不是jQuery*/
const$=document.querySelector.bind（文档）；
$（“按钮”）.addEventListener（“单击”，函数（）{
$（'button'）.style.display='none'；
$（'div'）.style.display='block'；
});
/*您需要的一切*/
p{
位置：绝对位置；
排名：0；
左：0；
保证金：0；
背景：红色；
动画：createBox.5s；
宽度：100vw；高度：100vh；
}
@关键帧createBox{
从{
变换：比例（0）；
}
到{
变换：比例（1）；
}
}
/*此演示的附加内容*/
StackSnippet容器需要正文{margin:0；}/*号*/
div{
显示：无；
保证金：0；
填充：0；
位置：相对位置；
宽度：100%；
身高：100%；
最小高度：100vh；
最大高度：100vh；
溢出：隐藏；
}
p{
显示：网格；
放置项目：中心；
}
旁白{
高度：50vh；
显示：网格；
放置项目：中心；
}
钮扣{
填充：30px；
字号：2rem；
}
苏普{
字体大小：.9rem；
}
再次点击运行代码片段按钮重新运行

向我展示
（最佳浏览“完整页面”）
Fair的可能副本，我已经看到了该解决方案，但我想使用关键帧方法。然而，正如下面的答案所示，它似乎是变换和关键帧的混合。令人惊讶的是，正是我想要的。不过，我可能看错了资源。是否有可能获得进一步阅读的链接。此外，还提到了
变换
如何优于动画位置和
高度
/
宽度
直接（在“图层、合成、CPU和GPU”上）。谢谢：）喜欢这些简短清晰的答案