使用transformY结合scale时SVG气泡动画方向异常问题排查与解决

1. SVG变换原点的特殊性：SVG元素默认以**SVG视口的左上角(0,0)**作为变换原点，而非HTML元素默认的自身中心。你设置的transform-origin: top是相对于整个SVG视口的顶部，不是单个气泡的顶部，因此缩放时会以视口顶部为中心拉扯元素，导致气泡偏移且间距被缩放。
2. 变换顺序的影响：CSS变换是从右往左依次执行的，你原来的transform: translateY(-50px) scale(0.5)会先执行缩放，再执行位移——缩放后的位移距离也会被同步缩放，进一步放大了位置偏移的问题。

1. 修正变换原点 #

给每个气泡设置以自身中心为基准的变换原点，确保缩放仅作用于气泡本身，不会改变其位置：

#circle1,
#circle2,
#circle3,
#circle4 {
  transform-origin: 50% 50%; /* 等同于自身中心，也可写为center center */
  animation: bubble 4s ease-in-out infinite;
}

2. 调整变换顺序 #

将scale放在translateY之前（CSS书写顺序），让位移先执行，再执行缩放，避免缩放影响位移的实际距离：

@keyframes bubble {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  50% {
    opacity: 1;
    transform: scale(0.5) translateY(-50px);
  }
  100% {
    opacity: 0;
    transform: scale(0) translateY(-100px);
  }
}

修改后的完整代码 #

svg {
  position: absolute;
  left: 200px;
  top: 200px;
  overflow: visible;
}

@keyframes bubble {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  50% {
    opacity: 1;
    transform: scale(0.5) translateY(-50px);
  }
  100% {
    opacity: 0;
    transform: scale(0) translateY(-100px);
  }
}

#circle1,
#circle2,
#circle3,
#circle4 {
  transform-origin: 50% 50%;
  animation: bubble 4s ease-in-out infinite;
}

<svg width="500" height="1000" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle1" cx="30" cy="30" r="10" fill="red"/>
  <circle id="circle2" cx="70" cy="30" r="10" fill="blue"/>
  <circle id="circle3" cx="30" cy="70" r="10" fill="green"/>
  <circle id="circle4" cx="70" cy="70" r="10" fill="yellow"/>
</svg>

这样修改后，气泡会以自身为中心逐渐缩小，同时稳定向上移动，不会出现侧方偏移，气泡间的相对距离也保持不变。

内容的提问来源于stack exchange，提问作者Malvinka