CSS中切换状态时内嵌SVG动画仅播放一次的问题求助（UserCSS场景）

核心原因 #

SVG的<animate>元素默认只在元素首次渲染时运行一次动画。用CSS切换SVG显示/隐藏时，元素只是被隐藏而非销毁重建，所以动画不会重新触发，和缓存没关系。

纯CSS解决方案 #

方法1：用display: none强制重置SVG #

切换到非激活状态时，给对应SVG设置display: none，别用opacity: 0或visibility: hidden。因为display: none会让浏览器彻底移除元素的渲染状态，再次显示时会重新初始化，<animate>就会从头播放。

示例代码：

/* 用checkbox实现无JS切换的按钮容器 */
.toggle-btn {
  position: relative;
  width: 48px;
  height: 48px;
}

.toggle-btn input {
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: absolute;
  z-index: 1;
}

/* 两个SVG的初始状态 */
.toggle-svg-1, .toggle-svg-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.toggle-svg-2 {
  display: none;
}

/* 切换状态时切换display属性 */
.toggle-btn input:checked ~ .toggle-svg-1 {
  display: none;
}

.toggle-btn input:checked ~ .toggle-svg-2 {
  display: block;
}

方法2：把动画移到CSS里实现 #

如果不想依赖SVG自带的<animate>，可以把动画逻辑写到CSS的@keyframes里，切换状态时给SVG添加/移除动画类，每次切换都能触发动画重播。

示例：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.toggle-svg-1 {
  display: none;
  animation: spin 1s linear forwards;
}

.toggle-btn input:not(:checked) ~ .toggle-svg-1 {
  display: block;
  /* 强制重置动画 */
  animation: none;
  animation: spin 1s linear forwards;
}

.toggle-svg-2 {
  display: none;
  animation: spin 1s linear reverse forwards;
}

.toggle-btn input:checked ~ .toggle-svg-2 {
  display: block;
  animation: none;
  animation: spin 1s linear reverse forwards;
}

方法3：用animation-play-state控制（兼容性稍差） #

如果想保留SVG的<animate>，可以试试用CSS的animation-play-state配合:checked伪类触发重置，但这种方法对不同浏览器的兼容性不如前两种，更适合CSS动画场景。

注意事项 #

• UserCSS环境下优先选方法1，不用修改SVG代码，纯CSS就能搞定。
• 如果你的SVG<animate>加了begin="indefinite"，可以尝试结合visibility和CSS动画的组合触发，但稳定性不如display: none。

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