Пусковой импульс от центра

Question

Я создал импульсную анимацию, которая начинается с угла. Я хочу, чтобы он начинался с центра круга, ниже - css для того же, что мне делать, чтобы начать анимацию из центра круга.

.animation-container{width: auto; height: 500px;} 
.aniCircle{width: 100px;height: 100px;border-radius: 50%;background: orange;margin: 0 auto;position: relative;top: 40%;animation: firstone 2s linear infinite alternate;-webkit-animation: firstone 2s linear infinite alternate;} 
@-webkit-keyframes firstone{ 
    0% {width:0px; height: 0px; background: violet;} 
    10%{width: 10px; height: 10px;background: indigo;} 
    20%{width: 20px; height: 20px; background: blue;} 
    30%{width: 30px; height: 30px; background: green;} 
    40%{width: 40px; height: 40px; background: yellow;} 
    50%{width: 50px; height: 50px; background: orange;} 
    60%{width: 60px; height: 60px; background: orange;} 
    70%{width: 70px; height: 70px; background: red;} 
    80%{width: 80px; height: 80px; background: orange;} 
    90%{width: 90px; height: 90px; background: yellow;} 
    100%{width: 100px; height: 100px; background: green;} 
} 

и вот ссылка на codepen: http://codepen.io/SurajVerma/pen/igxyr

Спасибо.

Answer 1

SOLUTION

CSS ИЗМЕНЕНИЯ:

position: absolute; 
top: 50%; left: 50%; 
transform: translate(-50%, -50%); 

сниппетов:

.animation-container{width: auto; height: 500px;} 
 
.aniCircle{width: 100px;height: 100px;border-radius: 50%;background: orange;position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);animation: firstone 2s linear infinite alternate;-webkit-animation: firstone 2s linear infinite alternate;} 
 
@-webkit-keyframes firstone{ 
 
    0% {width:0px; height: 0px; background: violet;} 
 
    10%{width: 10px; height: 10px;background: indigo;} 
 
    20%{width: 20px; height: 20px; background: blue;} 
 
    30%{width: 30px; height: 30px; background: green;} 
 
    40%{width: 40px; height: 40px; background: yellow;} 
 
    50%{width: 50px; height: 50px; background: orange;} 
 
    60%{width: 60px; height: 60px; background: orange;} 
 
    70%{width: 70px; height: 70px; background: red;} 
 
    80%{width: 80px; height: 80px; background: orange;} 
 
    90%{width: 90px; height: 90px; background: yellow;} 
 
    100%{width: 100px; height: 100px; background: green;} 
 
} 
 
@-moz-keyframes firstone{ 
 
    0% {width:0px; height: 0px; background: violet;} 
 
    10%{width: 10px; height: 10px;background: indigo;} 
 
    20%{width: 20px; height: 20px; background: blue;} 
 
    30%{width: 30px; height: 30px; background: green;} 
 
    40%{width: 40px; height: 40px; background: yellow;} 
 
    50%{width: 50px; height: 50px; background: orange;} 
 
    60%{width: 60px; height: 60px; background: orange;} 
 
    70%{width: 70px; height: 70px; background: red;} 
 
    80%{width: 80px; height: 80px; background: orange;} 
 
    90%{width: 90px; height: 90px; background: yellow;} 
 
    100%{width: 100px; height: 100px; background: green;} 
 
}

<div class="content animation-container"> 
 
    <div class="aniCircle"></div> 
 
</div>