CSS 动画 - 从中心生长
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42632767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Animations - Grow from center
提问by alexp2603
hope all is good.
希望一切都好。
I'm working on a game and I want to animate some boxes.
我正在开发一款游戏，我想为一些盒子制作动画。
I want a box to start from small and then grow outwards, with all edges growing at the same time in an effect that looks like it is growing outwards from the center.
我想要一个盒子从小开始然后向外生长，所有边缘同时生长，效果看起来像是从中心向外生长。
The best animation I have so far is the following: it grows the height and the width of the box as I want, but starts from the left and top. I would like it to start from a center point.
到目前为止，我拥有的最好的动画如下：它根据需要增加框的高度和宽度，但从左侧和顶部开始。我希望它从一个中心点开始。
I looked at the animation properties on W3 and nothing seems to fit the boat.
我查看了 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;
}
}
EDIT: My question may seem like another similar one, but I just wanted to know how to do it using only keyframe.
编辑：我的问题可能看起来像另一个类似的问题，但我只是想知道如何仅使用关键帧来做到这一点。
Thanks, Alex
谢谢，亚历克斯
回答by Michael Coker
You should use transformin the animation for better performance and more control. Then you won't have to repeat the static pxvalues, and you can use transform-originto control where the transform happens. scale()will scale from the center by default.
您应该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>