17370845950

应将 transition 写在基础选择器中以实现颜色渐变自然柔和，推荐使用 color 0.25s ease-in-out，避免写在伪类里或用 linear；注意继承干扰及自定义属性不可直接过渡，深色模式需配合 class 与 transition 手动处理。

直接改颜色值会让文字或背景切换显得生硬、闪烁甚至刺眼，关键是没加过渡动画。用 transition 控制 color 变化节奏，就能让颜色渐变自然柔和。

确保 transition 写在默认状态上

很多人把 transition 写在 hover 或 active 等伪类里，这是无效的——浏览器只在“离开”时不会自动回退动画。必须写在基础选择器中（比如 a、.btn），让进入和退出都触发过渡。

• ✅ 正确写法：a { color: #333; transition: color 0.3s ease; }
  a:hover { color: #007bff; }
• ❌ 错误写法：a:hover { color: #007bff; transition: color 0.3s ease; }（移出时立刻跳回，无过渡）

选对缓动函数（easing）

ease 是默认值，先慢后快再慢，适合大多数场景；如果想更轻柔，可用 ease-in-out；避免用 linear（匀速），它容易显得机械、不够自然。

• 推荐组合：transition: color 0.25s ease-in-out;
• 微动更细腻：0.15s–0.3s 之间最舒服，超过 0.4s 会让人感觉延迟

注意继承与层叠干扰

如果父元素设置了 color，子元素又用了 inherit 或未重置，transition 可能失效或行为异常。建议显式声明颜色，并检查 computed styles 确认过渡是否真正作用在目标属性上。

• 检查方式：浏览器开发者工具 → Elements → Styles → 找到 color 行，看是否有「动画小图标」
• 常见陷阱：CSS 自定义属性（--text-color）不能被 transition 直接监听，需配合 JavaScript 或用 color-mix()（较新）等方案

深色/浅色模式切换时特别处理

系统级主题切换（@media (prefers-color-scheme: dark)）本身不触发动画，需要手动加 JS 或用 transition 配合 class 切换：

• 给 body 加 class：body.light { color: #333; } body.dark { color: #eee; }
• 统一加过渡：body { transition: color 0.4s ease, background-color 0.4s ease; }
• 这样切主题时，文字和背景都能平滑过渡，不突兀