如何停止SVG中g组内单个子元素的动画？

你现在碰到的问题其实不是子元素继承了父元素的动画属性——而是父元素的opacity动画会直接影响整个容器内的子元素视觉表现！因为子元素是父元素容器的一部分，父元素的透明度变化会“带着”子元素一起变淡/变亮，哪怕你给子元素加了animation: none !important也没用，毕竟子元素本身根本没在执行动画，只是被父元素的透明度变化拖得看起来在闪烁。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：用伪元素承载父元素的动画（最推荐） #

把父元素的动画放到它的伪元素上，让伪元素作为背景层执行透明度动画，子元素在伪元素上方独立渲染，完全不受影响：

.pulsBlockly {
  position: relative; /* 给伪元素提供定位参考 */
}
.pulsBlockly::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: pulsBlockly 1s ease-out 0s infinite alternate;
  opacity: 1.0;
  z-index: -1; /* 让伪元素在子元素下方，不遮挡内容 */
}
@keyframes pulsBlockly {
  0% { opacity: 0.4; }
  100% { opacity: 0.1 }
}
/* 现在.nopulsBlockly类可以不需要了，除非你还有其他样式需求 */

你的SVG结构完全不用改，这样父元素的伪元素自己动，子元素该咋显示咋显示。

方案2：让子元素脱离父元素的渲染上下文 #

给子元素设置position: absolute，同时让父元素设为position: relative作为定位容器，这样子元素就不在父元素的透明度影响范围内了：

.pulsBlockly {
  animation: pulsBlockly 1s ease-out 0s infinite alternate;
  opacity: 1.0;
  position: relative; /* 作为子元素的定位基准 */
}
@keyframes pulsBlockly {
  0% { opacity: 0.4; }
  100% { opacity: 0.1 }
}
.nopulsBlockly {
  position: absolute;
  top: 0;
  left: 0;
  /* 可能需要微调top/left值，确保子元素和原来的位置完全一致 */
}

方案3：用CSS变量控制透明度 #

父元素的动画修改CSS变量，子元素强制覆盖这个变量为固定值，从而固定自己的透明度：

.pulsBlockly {
  --blockly-opacity: 1;
  animation: pulsBlockly 1s ease-out 0s infinite alternate;
  opacity: var(--blockly-opacity);
}
@keyframes pulsBlockly {
  0% { --blockly-opacity: 0.4; }
  100% { --blockly-opacity: 0.1 }
}
.nopulsBlockly {
  --blockly-opacity: 1 !important;
  opacity: var(--blockly-opacity) !important;
}

这种方法靠CSS变量的优先级覆盖，让子元素的透明度不受父元素动画的影响。

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