transition必须写在基础选择器中而非仅:hover或类中，否则移除状态时无过渡；仅transform、opacity等可插值属性支持平滑过渡，display等不可插值属性完全不支持。
背景色过渡必须在「变化前」和「变化后」两个状态都声明 transition，否则移除类时直接跳变——这是最常被忽略的前提。
为什么只给 .highlighted 加 transition 没用
因为 CSS 过渡只在属性值发生数值变化时触发，且依赖元素在「当前状态」和「目标状态」都具备可计算的过渡声明。如果仅在 .highlighted 里写 transition: background-color 0.3s，那么：
- 添加类时：从无/transparent → yellow，
.highlighted生效，淡入成功 - 移除类时：从 yellow → 回退到原始状态（比如未设背景色），此时原始元素没声明
transition，浏览器跳过补间，瞬间回退 - 哪怕原始背景是
transparent，部分浏览器（尤其 Safari）也不稳定触发过渡
正确写法：基类必须带默认 transition
把过渡声明放在基础选择器上，确保双向变化都被接管：
.form {
background-color: #fff; /* 显式定义初始值，别留 transparent */
transition: background-color 0.4s ease;
}
<p>.form.highlighted {
background-color: #ffeb3b;
}这样无论加类还是删类，浏览器都知道该对 background-color 做平滑插值。若想淡入更快、淡出更缓，可单独覆盖：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
.form.highlighted {
background-color: #ffeb3b;
transition: background-color 0.2s ease-in;
}表格行 hover 变色为啥不动？
因为 <tr> 不渲染背景，真正起作用的是 <code><td>。常见失效原因：<ul><li><code><td> 初始 <code>background-color 是 transparent（不推荐）或未声明
transition 写在 <tr> 上，实际无效<li>用了 <code>table-layout: fixed 并配合百分比宽度，可能干扰重绘正确做法：
table td {
background-color: #ffffff;
transition: background-color 0.25s ease;
}
<p>tr:hover td {
background-color: #f5f5f5;
}暗色模式切换要过渡，transition 往哪写
必须写在「默认主题」的选择器里，而不是只写在 .dark-mode 类中：
- ✅ 正确：
.header { transition: background-color 0.3s, color 0.3s; }+.dark-mode .header { background-color: #121212; color: white; } - ❌ 错误：只在
.dark-mode .header里写transition，移除.dark-mode时照样跳变 - 所有参与过渡的属性（如
border-color、box-shadow）都要在基础规则里声明，不能一边有、一边没
最易被忽略的一点：过渡生效的前提，是两个状态下的属性值都「可计算」——color: currentColor 和 color: #333 可以过渡，但 color: inherit 和 color: #333 在某些上下文中会退化为跳变。
