愿所有的美好和期待都能如约而至

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

发布时间:  来源:互联网  作者:匿名  标签:animation css css-transforms error CSS Animation - Grow from center (Zoom from c  热度:37.5℃

本文介绍了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()默认从中心开始缩放。

数据-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动画-从中心开始增长(从中心点缩放到整个容器)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP