CSS 动画 — 如何从中心填充 div

Question

在下面的 fiddle 中 — 我希望 div 从中心填充，而不是从 top/left 填充。

我见过在关键帧中设置边距的例子，但我觉得这永远是不干净的。

此外，我可以用过渡来做到这一点吗？动画是做到这一点的最佳方式吗？

这是fiddlehttps://jsfiddle.net/hogue/mu0f6mk1/

.wrap {
  position: relative;
  margin: 0 auto;
  width: 600px;
  height: 600px;
  cursor: pointer;
}

.wrap div {
  border-radius: 10px;
  box-shadow: inset 0 0 45px rgba(255, 255, 255, .3), 0 12px 20px -10px rgba(0, 0, 0, .4);
  color: #FFF;
  text-align: center;
  text-shadow: 0 1px rgba(0, 0, 0, .3);
  font: bold 3em sans-serif;
}

.first-layer {
  background: #95a5a6;
  width: 0px;
  height: 0px;
  position: absolute;
  -webkit-animation: firstLayer 2s ease-in 0s forwards;
}

.second-layer {
  background: #95a5a6;
  width: 0px;
  height: 0px;
  position: absolute;
  top: 8.5%;
  left: 8.5%;
  -webkit-animation: secondLayer 2s ease-in 0s forwards;
}

.third-layer {
  background: #95a5a6;
  width: 0px;
  height: 0px;
  position: absolute;
  top: 17%;
  left: 17%;
  -webkit-animation: thirdLayer 2s ease-in 0s forwards;
}

.fourth-layer {
  background: #95a5a6;
  width: 0px;
  height: 0px;
  position: absolute;
  top: 25%;
  left: 25%;
  -webkit-animation: fourthLayer 2s ease-in 0s forwards;
}

@-webkit-keyframes firstLayer {
  to {
    width: 400px;
    height: 400px;
  }
}

@-webkit-keyframes secondLayer {
  to {
    width: 300px;
    height: 300px;
  }
}

@-webkit-keyframes thirdLayer {
  to {
    width: 200px;
    height: 200px;
  }
}

@-webkit-keyframes fourthLayer {
  to {
    width: 100px;
    height: 100px;
  }
}

<div class="wrap">
  <div class="first-layer"></div>
  <div class="second-layer"></div>
  <div class="third-layer"></div>
  <div class="fourth-layer"></div>
</div>

Answer 1

我有repaired you the code

@-webkit-keyframes firstLayer {
  from {
    width: 0px;
    margin-left: 0;
    margin-top: 0;
    height: 0px;
  }
  to {
    width: 400px;
    margin-left: -200px;
    margin-top: -200px;
    height: 400px;
  }
}

CSS 动画 — 如何从中心填充 div

CSS animate — how to fill div from center

css

animate.css