CSS animate - как заполнить div от центра

Question

В скрипке ниже - я хочу, чтобы divs заполнялись от центра, а не от верхнего/левого.

Я видел примеры, когда поля заданы в ключевом кадре, но на меня навсегда нечисто.

Кроме того, могу ли я сделать это с переходами, анимировать лучший способ сделать это?

Вот скрипка 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

@-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; 
 
    } 
 
}