如何仅使用CSS实现带内联transform的SVG圆点脉冲动画

可以纯CSS实现，不需要用到Lottie，有两种可行方案：

方案1：嵌套分组隔离定位transform（更易维护） #

• 核心逻辑：把定位用的transform和动画用的transform拆分到不同元素上，避免覆盖
• 操作步骤：
  1. 给需要加动画的圆点path外层套一个独立的<g>标签，把path上原有的内联transform属性移动到这个<g>上，定位逻辑完全不变
  2. 给path添加transform-box: fill-box和transform-origin: center规则，确保缩放基于圆点自身中心，不会偏移
  3. SVG内部元素不支持CSS box-shadow，改用filter: drop-shadow()实现扩散发光效果

代码示例

修改SVG结构：

<!-- 原来的path代码 -->
<!-- <path class="pink-dot" id="Path_110684" data-name="Path 110684" d="M18.325,0C28.4-.047,36.525,8.442,36.477,18.963S28.226,38.05,18.153,38.1-.047,29.655,0,19.135,8.252.048,18.325,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 890.741, 189.504)" fill="#f277c6" /> -->

<!-- 修改后的代码 -->
<g transform="matrix(0.995, -0.105, 0.105, 0.995, 890.741, 189.504)">
  <path class="pink-dot" id="Path_110684" data-name="Path 110684" d="M18.325,0C28.4-.047,36.525,8.442,36.477,18.963S28.226,38.05,18.153,38.1-.047,29.655,0,19.135,8.252.048,18.325,0Z" fill="#f277c6" />
</g>

修改CSS规则：

@keyframes pulse {
  0% {
    transform: scale(0.95);
    filter: drop-shadow(0 0 0 rgba(242, 119, 198, 0.7));
  }
  70% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(242, 119, 198, 0));
  }
  100% {
    transform: scale(0.95);
    filter: drop-shadow(0 0 0 rgba(242, 119, 198, 0));
  }
}

path.pink-dot{
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1);
  animation: pulse 2s infinite;
}

方案2：合并transform值（无需修改SVG结构） #

• 核心逻辑：CSS transform属性支持多个变换函数叠加，把定位用的matrix和动画用的scale写在一起即可
• 适用场景：不能修改SVG原始结构的场景

代码示例

@keyframes pulse {
  0% {
    transform: matrix(0.995, -0.105, 0.105, 0.995, 890.741, 189.504) scale(0.95);
    filter: drop-shadow(0 0 0 rgba(242, 119, 198, 0.7));
  }
  70% {
    transform: matrix(0.995, -0.105, 0.105, 0.995, 890.741, 189.504) scale(1);
    filter: drop-shadow(0 0 10px rgba(242, 119, 198, 0));
  }
  100% {
    transform: matrix(0.995, -0.105, 0.105, 0.995, 890.741, 189.504) scale(0.95);
    filter: drop-shadow(0 0 0 rgba(242, 119, 198, 0));
  }
}

path.pink-dot{
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 2s infinite;
}

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