CSS变量本身不可动画transition必须作用于使用变量的原生属性如color、background-color而非变量名需统一颜色格式并确保transition声明在使用变量的元素上。transition 为什么对 CSS 变量无效直接给 --primary-color 加 transition: --primary-color 0.3s 不会生效——CSS 标准里 transition 不支持自定义属性CSS 变量本身作为可动画属性。浏览器不知道怎么插值两个 var(--x) 的中间态。真正能触发过渡的是那些**被变量计算后最终落地的原生属性**比如 color、background-color、opacity 等。变量只是“占位符”不是“样式属性”必须让变量参与计算的**结果属性**显式声明 transition如果只改变量、不重设依赖它的属性动画根本不会启动主题切换动画的正确写法以 :root 变量 class 切换为例假设你用 :root 定义暗色主题变量再用 body.dark 覆盖动画要起作用关键在「哪里加 transition」和「谁在变」。:root { --text-color: #333; --bg-color: #fff;}pbody {color: var(--text-color);background-color: var(--bg-color);/em ? 这里加 transition —— 动的是 color 和 background-color /em/transition: color 0.3s ease, background-color 0.3s ease;}/ppbody.dark {--text-color: #ddd;--bg-color: #1a1a1a;/em ? 这里不能写 transition变量本身不可动画 /em/}transition 必须写在「使用变量的元素」上如 body而不是 :root 或 .dark 类本身确保所有要过渡的属性都显式声明了 transition漏一个就卡顿避免用 all 0.3s可能意外触发 layout、paint 重排性能差遇到 transition 生效但闪烁/跳变怎么办常见于颜色值类型不一致比如从 hsl(0, 0%, 0%) 切到 #000或 rgba(0,0,0,1) 切到 black。浏览器无法插值不同格式会退化为逐帧硬切。 Ideogram Ideogram是一个全新的文本转图像AI绘画生成平台擅长于生成带有文本的图像如LOGO上的字母、数字等。