Question

希望一切顺利。

我正在制作游戏，我想为一些盒子制作动画。

我希望一个盒子从小开始然后向外生长，所有边缘同时生长，其效果看起来像是从中心向外生长。

到目前为止，我所拥有的最佳动画如下：它可以根据需要增加框的高度和宽度，但是从左侧和顶部开始。我希望它从一个中心点开始。

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

编辑：我的问题可能看起来像另一个类似问题，但我只是想知道如何只使用关键帧。

谢谢，Alex

Answer 1

您应该在动画中使用transform以获得更好的性能和更多控制。然后，您不必重复静态px值，并且可以使用transform-origin来控制转换发生的位置。默认情况下，scale()会从中心缩放。

＆＃13;

div {
  background: red;
  animation: createBox .25s;
  width: 98px; height: 98px;
}
@keyframes createBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

＆＃13;

<div></div>

＆＃13;

Answer 2

这是一个完整的示例。我在与迈克尔·科克（Michael Coker）的StackSnippet一起玩的同时为自己创建了它-但我想我还是愿意分享。

/*  Look Carefully: This is NOT jQuery  */
const $ = document.querySelector.bind(document);
$('button').addEventListener("click", function() {
  $('button').style.display = 'none';
  $('div').style.display = 'block';
});

/*  All You Need  */
p {
  position: absolute;
  top:0;
  left:0;
  margin:0;
  background: red;
  animation: createBox .5s;
  width: 100vw; height: 100vh;
}
@keyframes createBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}


/* Extras for this Demo */
body{margin:0;} /*  Required for StackSnippet Container  */
div{
  display:none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
p{
  display: grid;
  place-items: center;
}
aside{
  height: 50vh;
  display: grid;
  place-items: center;
}
button{
  padding: 30px;
  font-size: 2rem;
}
sup{
font-size: .9rem;
}

<div><p>Hit the Run Code Snippet button again to re-run</p></div>
<aside><button>Show Me<br><sup>(Best viewed "Full Page")</sup></button></aside>

CSS动画 - 从中心

2 个答案:

CSS动画 - 从中​​心

2 个答案:

CSS动画 - 从中心