元素添加animation动画导致本身的绝对定位失效(元素错位了)

话不多说先上代码和效果

就像展示的一样，本来居中的圆再添加完放大动画后错位了并不居中

经排查是关键帧里的transform覆盖了原来的属性值

.ball{
  ...
  transform: translate(-50%, -50%);
  ...
  ...
  animation: change 3s infinite;
  ...
}
@keyframes change{
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.5);
  }
  100%{
    transform: scale(1);
  }
}

所以在关键帧的transform属性中也添加translate(-50%, -50%)值即可

.ball{
  ...
  transform: translate(-50%, -50%);
  ...
  ...
  animation: change1 3s infinite;
  ...
}
@keyframes change1{
  0%{
    transform: translate(-50%, -50%) scale(1);
  }
  50%{
    transform: translate(-50%, -50%) scale(1.5);
  }
  100%{
    transform: translate(-50%, -50%) scale(1);
  }
}

这样就好了