CSS动画放大后位置偏移

要实现如图的这种效果。原理就是中心点几个圆慢慢变大，但在实际操作过程中发现在变大时位置会发生偏移

首先模拟一个放大的过程，ripple1和ripple2初始都是一个3*3的圆，ripple1为红色，ripple2为黄色。红色的圆会逐渐变大为一个100*100的圆

 

在运行中会发现，红色的圆在变大过程中会向右下偏移

        body{
            background-color:#333333;
        }
        .map{
            position:relative;
            width:747px;
            height:617px;
            background:url(map.png);
            margin:0 auto;
            border:1px solid red;
        }
        .centre{
            position:absolute;
            top: 227px;
            right: 10px;
            width: 200px;
            height: 200px;
            border:1px solid pink;
        }
        .centre .ripple1{
            position:absolute;
            
            /*transform:translate(-50%,-50%);*/
            width: 5px;
            height: 5px;
            border-radius:50%;
            background-color:red;
            /*box-shadow: 0 0 12px #009dfd;*/
            animation:pple 3s linear;
            animation-delay:2s;
            animation-fill-mode:forwards;
        }
        .centre .ripple2{
            position:absolute;
            z-index: 9999;
            width: 5px;
            height: 5px;
            background-color:yellow;
            border-radius:50%;
        }
        @keyframes pple{
            0%{}
            60%{
                width: 60px;
                height: 60px;
            }
            100%{
                width: 100px;
                height: 100px;
            }
        }

如果我们给ripple1添加一个属性：transform:translate(-50%,-50%);这样在变大时位置就不会发生偏移

 

 方法找到了，但问题产生的原因是什么呢。当把div边框的圆角去掉时再来观察就比较清晰了

 

 可以看成是盒子在变化时，虽然中心点变化了，但左侧总是挨着父盒子左边框，所以在形变时，加上transform:translate(-50%,-50%) 的效果，让盒子不论在什么状态下始终是中心点处于原点处

但这里又有一个疑问，我不用translate，因为盒子本身就做了定位，直接用{top:50%;right:50%}可不可以

答案是不可以，因为top是给盒子做初始的定位，当盒子变化时，top不能再影响盒子了，只能通过transform来控制盒子