Html 从中心开始的脉冲

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

下面是代码笔的链接：

谢谢。

CSS更改：

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

片段：

.animation容器{宽度：自动；高度：500px；}
.A圆{宽度：100px；高度：100px；边框半径：50%；背景：橙色；位置：绝对；顶部：50%；左侧：50%；变换：平移（-50%，-50%）；动画：firstone 2s线性无限交替；-webkit动画：firstone 2s线性无限交替；}
@-webkit关键帧第一个{
0%{宽度：0px；高度：0px；背景：紫色；}
10%{宽度：10px；高度：10px；背景：靛蓝；}
20%{宽度：20px；高度：20px；背景：蓝色；}
30%{宽度：30px；高度：30px；背景：绿色；}
40%{宽度：40px；高度：40px；背景：黄色；}
50%{宽度：50px；高度：50px；背景：橙色；}
60%{宽度：60px；高度：60px；背景：橙色；}
70%{宽度：70px；高度：70px；背景：红色；}
80%{宽度：80px；高度：80px；背景：橙色；}
90%{宽度：90px；高度：90px；背景：黄色；}
100%{宽度：100px；高度：100px；背景：绿色；}
}
@-moz为firstone设置关键帧{
0%{宽度：0px；高度：0px；背景：紫色；}
10%{宽度：10px；高度：10px；背景：靛蓝；}
20%{宽度：20px；高度：20px；背景：蓝色；}
30%{宽度：30px；高度：30px；背景：绿色；}
40%{宽度：40px；高度：40px；背景：黄色；}
50%{宽度：50px；高度：50px；背景：橙色；}
60%{宽度：60px；高度：60px；背景：橙色；}
70%{宽度：70px；高度：70px；背景：红色；}
80%{宽度：80px；高度：80px；背景：橙色；}
90%{宽度：90px；高度：90px；背景：黄色；}
100%{宽度：100px；高度：100px；背景：绿色；}
}

---

现在我意识到我可以设置变换属性的动画，而不是从中心开始脉冲的高度和宽度。这是你的电话号码