Css动画-从中心开始增长(从中心点缩放到整个容器) [英] CSS Animation - Grow from center (Zoom from center dot to full container)

问题描述

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

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

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

我查看了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>

这篇关于Css动画-从中心开始增长(从中心点缩放到整个容器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！