从中心开始脉冲

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>