svg图标动画需为内部元素（如）单独设class并用@keyframes控制，避免整体动画混乱；推荐opacity与transform组合实现自然过渡，时长严格控制在0.25s–0.4s，并注意初始状态、硬件加速及overflow裁剪问题。
用 @keyframes 控制图标内部元素的独立动画
直接给整个 <svg></svg> 加 transition 或 animation，会导致云、雨、太阳一起晃——这不是过渡，是混乱。真正可控的做法是：为 SVG 内部各组元素（比如 <g class="cloud"></g>、<g class="rain"></g>）单独设 class，再分别定义 @keyframes。
常见错误：
- 把动画写在内联
style里 → 无法复用、难维护 - 没加
animation-fill-mode: forwards→ 动画一结束就回退到初始态，图标“闪一下”就没了 - 对
display或visibility做动画 → 它们不支持过渡，写了也白写
推荐结构示例：
<svg viewbox="0 0 100 100"><g class="cloud">...</g><g class="rain">...</g><circle class="sun-glow"></circle></svg>
然后分别写：
@keyframes float-cloud {
0% { transform: translateX(0); }
50% { transform: translateX(12px); }
100% { transform: translateX(0); }
}
.cloud { animation: float-cloud 8s ease-in-out infinite; }
opacity + transform 搭配才是图标淡入淡出的正确组合
只靠 opacity 切换，容易显得“平”；只靠 transform（比如缩放或位移），又缺乏进入/退出的呼吸感。天气图标这类小尺寸动态元素，最自然的过渡是两者叠加：
- 雨滴下落：用
transform: translateY()+opacity从 0→1→0，时长控制在1s左右 - 太阳光晕脉动：用
transform: scale()在0.95和1.05之间循环，周期约3s - 所有动画都必须设
animation-timing-function: ease-in-out，硬起硬停会破坏图标轻盈感
注意：别用 all 做 transition —— 图标里常含 fill、stroke-width 等属性，意外触发它们的过渡会让颜色或描边“抽搐”。
切换图标类型时如何避免闪烁或空白
比如从「晴天」SVG 切到「雷雨」SVG，如果直接替换整个 <svg></svg> 内容，浏览器会清空旧 DOM、重绘新 DOM，中间有不可控的空白帧。更稳的做法是：
- 提前把所有图标 SVG 写进 HTML，用
display: none隐藏非当前项 - 切换时只改容器 class，比如
<div class="weather-icon is-sunny"> → <code>is-rainy - 配合 CSS 中的
.is-sunny .icon-sunny { opacity: 1; }和.is-rainy .icon-rainy { opacity: 1; }，让显示/隐藏走opacity过渡 - 务必监听
transitionend事件，等淡出完成再把旧图标设为display: none，否则布局可能跳动 - 初始状态没写
opacity: 0或transform: scale(0.9)——transition不知道“从哪开始变” - CSS 类是通过 JS 动态添加的，但添加后立刻改样式 → 浏览器来不及响应，得加
setTimeout(() => ..., 0)或用requestAnimationFrame - 父容器用了
will-change: transform，但子元素没设transform: translateZ(0)→ 硬件加速未启用，动画卡顿 - 过渡时长设成
0.1s或1.5s—— 前者人眼几乎看不出变化，后者拖慢交互节奏；图标类过渡建议严格控制在0.25s–0.4s
关键点：不要在 JS 里连续写 el.style.opacity = '0'; el.style.opacity = '1'; —— 浏览器会合并渲染，动画直接消失。要用 class 切换，或插一句 el.offsetHeight 强制重排。
为什么 transition 在图标上常常“不动”
不是代码写错了，而是触发条件没满足。图标类动画失效的典型原因：
真正容易被忽略的是：SVG 元素默认 overflow: hidden，如果动画中 transform 超出 viewBox 范围，内容会被裁掉——调试时记得临时加 overflow: visible 看全貌。
