CSS如何实现平滑的颜色过渡？使用transition过渡属性及cubic-bezier

transition颜色变化不生效，主因是作用于不可动画属性（如display、visibility）、自定义属性未用@property声明、色彩模型混用（rgb与hsl）或background简写含不可动画值。 transition颜色变化不生效？检查是否作用于可动画属性 直接写 却没反应，大概率是因为目标 CSS 属性本身不可动画。比如 、 、 都不能过渡；而 、 、 是支持的。但注意：CSS 自定义属性（ ）默认**不可动画**，必须配合 显式声明才能参与 。 常见误操作： 对 简写属性过渡，但其中混入了不可动画值（如 ），整个过渡会静默失败 用 切换到 —— 浏览器无法插值，会跳变；应统一色彩模型（都用 或都用 ） cubic-bezier(0.4, 0, 0.2, 1) 是什么？别硬记，用工具调 的四个参数不是百分比，而是贝塞尔曲线控制点坐标： ，其中 是起点控制点， 是终点控制点，所有值必须在 [0, 1] 范围内。标准「缓入缓出」效果就是 ，但它只是经验拟合值，并非物理定律。 实操建议： 立即学习 “ 前端免费学习笔记（深入） ”； 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 调试时打开 Chrome DevTools → Elements → Styles → 点击 右侧的小图标，直接拖动控制点预览效果 想模拟弹簧感？用 （material design 的「标准弹跳」） 避免写 —— 这等价于 ，但可读性差，直接写 更稳妥 transition触发时机不对？确保状态变更可被检测 写了 ，但 hover 时还是立刻变色，问题往往出在「状态变更未被浏览器识别为样式重排触发点」。比如： 通过 JS 修改 是有效的，但若只改 class，而该 class 的 color 声明被更高级别选择器覆盖（如 ），实际计算值没变，transition 就不会启动 用 批量修改多个样式时，若把 和 放在同一次渲染中设置，部分浏览器可能合并优化，跳过中间状态 元素初始无 color 声明（继承自父级），此时设置 是「从无到有」，但 transition 仍会工作 —— 因为 computed style 有确定值 深色模式切换时颜色过渡生硬？用 prefers-color-scheme + 自定义属性 单纯靠媒体查询切换 不会触发动画，因为媒体查询变更不被视为「样式属性变更」。正确做法是结合 CSS 自定义属性和 ： 注意： 目前仅 Chromium 内核（Chrome/Edge/Opera）和 Safari 16.4+ 支持，Firefox 尚未实现。如果需兼容，只能退回到 JS 控制 class 切换 + 手动加 类。 最易被忽略的一点：cubic-bezier 曲线在长时长（如 >0.5s）下容易显得拖沓，而短时长（cubic-bezier(0.4, 0, 0.2, 1) 是人眼感知最自然的区间。