CSS 自定义属性动画失效常因初始值为 0% 导致过渡起点无效，配合 animation 重触发机制缺失，需结合非零初始值、强制重绘及合理过渡策略修复。
css 自定义属性动画失效常因初始值为 0% 导致过渡起点无效，配合 `animation` 重触发机制缺失，需结合非零初始值、强制重绘及合理过渡策略修复。
在使用 CSS 自定义属性（CSS Custom Properties）驱动 @keyframes 动画时，一个常见却隐蔽的问题是：动画仅在手动保存 CSS 文件后才首次生效，后续更新则跳过动画直接跳转目标值。这并非浏览器缓存或开发工具 Bug，而是由 CSS 动画的触发机制与自定义属性更新逻辑共同导致。
根本原因有两点：
0% 初始值导致动画“无变化”
当 --temp-start: 0%; 且 --temp-end 被设为 0%（例如输入 0 → 0 * 2 = 0%），from 和 to 值相同，浏览器判定无需动画；即使输入非零值，若元素初始 height 本就为 0%（通过 #indicator-1 { height: var(--temp-start); } 设置），而 --temp-start 仍为 0%，则 animation 第一次播放时 from 帧高度为 0%，但 DOM 渲染可能尚未将该值解析为有效尺寸基准，造成动画不可见。CSS 动画不会自动重播已添加的 class
.slide-to-temp 类一旦被 classList.add() 添加，即使 --temp-end 变更，动画也不会自动重新触发——CSS 动画默认只在 class 首次应用 时播放一次（除非显式移除再添加，或使用 animation-play-state 控制）。
✅ 正确解法如下：
立即学习“前端免费学习笔记（深入）”；
① 初始化非零 CSS 变量值
将 :root 中的 --temp-start 和 --temp-end 设为最小有效值（如 1%），避免 0% 导致计算失效或渲染塌陷：
:root {
--temp-start: 1%;
--temp-end: 1%;
}② 强制动画重触发（关键！）
每次更新变量后，先移除再添加动画 class，确保动画帧重置：
function changeTemp() {
const inputTemp = parseFloat(prompt("Enter a temp:")) || 0;
const targetHeight = Math.max(1, inputTemp * 2); // 防止负值/0
document.documentElement.style.setProperty("--temp-end", `${targetHeight}%`);
const indicator = document.getElementById("indicator-1");
// 关键：强制重播动画
indicator.classList.remove("slide-to-temp");
void indicator.offsetWidth; // 强制重排（reflow），清空浏览器渲染队列
indicator.classList.add("slide-to-temp");
}? void indicator.offsetWidth 是经典“重排触发器”：读取布局属性会强制浏览器同步计算当前样式，从而让 removeClass → reflow → addClass 形成完整的动画重置周期。
③ 补充健壮性优化
- 使用 parseFloat() 防止 NaN 输入；
- Math.max(1, ...) 确保高度不低于 1%，维持可动画基础；
- 移除冗余的 transition: all（它对 animation 无实际作用，且可能干扰 height 的动画精度）；
- 保留 animation: slideToTemp 1s forwards 即可，forwards 确保动画结束后保持最终高度。
完整修复后的核心 JS 片段：
function changeTemp() {
const inputTemp = parseFloat(prompt("Enter a temp:")) || 0;
const targetHeight = Math.max(1, inputTemp * 2);
document.documentElement.style.setProperty("--temp-end", `${targetHeight}%`);
const indicator = document.getElementById("indicator-1");
indicator.classList.remove("slide-to-temp");
void indicator.offsetWidth; // ? 强制重排，使动画重置生效
indicator.classList.add("slide-to-temp");
}总结：CSS 自定义属性驱动动画 ≠ JavaScript 直接操控样式。它依赖 CSS 引擎对变量变更的响应与动画生命周期管理。非零初始值 + 强制重排 + class 重置 是解决此类“仅保存后生效”问题的黄金组合。务必避免 0% 基准、杜绝静默动画跳过，并用 offsetWidth 等布局读取操作作为可靠重绘锚点。
