应将 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; } - 这样切主题时，文字和背景都能平滑过渡，不突兀
