内嵌CSS的SVG动画问题：面向观察者的缩放效果失效

修复后的完整代码 #

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 768">
  <defs>
    <style>
      .cls-1 {
        fill: #b3b3b3;
      }
      .cls-2 {
        fill: #ccc;
      }
      #fall1, #fall2, #fall3, #fall4 {
        animation-fill-mode: both;
        animation-name: fadeOutDown;
        animation-duration: 2s;
        /* 关键：设置变换原点为元素自身中心 */
        transform-origin: 50% 50%;
      }
      #fall1 { animation-delay: 1s; }
      #fall2 { animation-delay: 1.2s; }
      #fall3 { animation-delay: 1.4s; }
      #fall4 { animation-delay: 1.6s; }

      @keyframes fadeOutDown {
        0% {
          opacity: 1;
          transform: scale(1);
        }
        20% {
          opacity: 1;
          transform: scale(1.5);
        }
        100% {
          opacity: 0;
          /* 组合缩放与位移，避免覆盖之前的变换效果 */
          transform: scale(1.5) translate3d(0, 100%, 0);
        }
      }
    </style>
  </defs>
  <g id="fall1">
    <rect class="cls-1" x="433" y="104" width="118" height="118"/>
  </g>
  <g id="fall2">
    <rect class="cls-2" x="551" y="104" width="118" height="118"/>
  </g>
  <g id="fall3">
    <rect class="cls-1" x="669" y="104" width="118" height="118"/>
  </g>
  <g id="fall4">
    <rect class="cls-2" x="787" y="104" width="118" height="118"/>
  </g>
</svg>

核心问题解析与修复说明 #

• 缩放偏移问题：
  你之前仅在20%关键帧中设置transform-origin，这会导致其他帧的变换原点回到SVG元素默认的左上角（0,0），从而出现偏移摆动。将transform-origin: 50% 50%移到目标元素的基础样式中，就能确保整个动画过程都以元素自身中心为变换基准。

• 动画衔接问题：
  CSS的transform属性是覆盖式的，你之前在100%帧只写了translate3d，会完全覆盖之前的scale效果，导致缩放消失。需要将缩放和位移组合成一个transform声明，让元素在保持放大状态的同时向下移动，同时配合opacity实现淡出效果。

• scale vs scale3d的选择：
  本次需求是2D平面的缩放效果，用scale(1.5)完全足够，代码更简洁。scale3d(1.5,1.5,1)虽然也能实现相同视觉效果，但属于3D变换，这里没有必要额外引入，除非你需要后续扩展Z轴相关的3D动画。

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