CSS animate — how to fill div from center - css

Question

In the fiddle below — I want the divs to fill in from the center, instead of from the top/left.
I've seen examples where margins are set in the keyframe, but that looks forever unclean to me.
Also, could I do this with transitions instead, is animate the best way to do this?
Here's the fiddle 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

I have 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;
}
}