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;
}
}
编辑:我的问题可能看起来像另一个类似的问题,但我只是想知道如何只使用关键帧来完成。
谢谢,
解决方案
您应该在动画中使用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>
相关文章