html - 从中心开始脉冲

Question

我创建了一个从 Angular 落开始的脉动动画。我希望它从圆心开始，下面是相同的 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>