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

Question

在下面的小提琴中 - 我希望div从中心填充，而不是从顶部/左侧填充。

我已经看过在关键帧中设置边距的示例，但这看起来对我来说永远是不洁净的。

另外，我是否可以使用转换执行此操作，为最佳方式制作动画？

这是小提琴https://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

obj = Idea.objects.get(name=idea_name)
new_obj = []
plan = ProductPlan.objects.all()
for product in plan:
    answers = product.question.answer_set.filter(idea=obj.id)
    new_plan = {"title": product.title, "answer": answers[0]}
    print new_plan
    new_obj.append(new_plan)

return render(request, 'idea.html', {"new_obj": new_obj, "obj":obj})