Css动画-从中心开始增长(从中心点缩放到整个容器)

2022-09-06 00:00:00 animation css css-transforms

我正在开发一个游戏,我想让一些方框具有动画效果。

我希望长方体从小开始,然后向外增长,所有边缘同时增长,效果看起来就像是从中心向外增长。

到目前为止,我得到的最好的动画是:它根据我的需要增加长方体的高度和宽度,但从左侧和顶部开始。我希望它从中心点开始。

我查看了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()默认从中心开始缩放。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
div {
  background: red;
  animation: createBox .25s;
  width: 98px; height: 98px;
}
@keyframes createBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
<div></div>

相关文章