CSS 动画未按预期执行，常因初始值为 0% 导致动画起止值相同而被浏览器跳过；正确设置非零初始值并配合 animation 或 transition 才能确保每次更新都触发动画。
css 动画未按预期执行，常因初始值为 `0%` 导致动画起止值相同而被浏览器跳过；正确设置非零初始值并配合 `animation` 或 `transition` 才能确保每次更新都触发动画。
在使用 CSS 自定义属性（CSS Custom Properties）驱动动画时，一个常见但极易被忽视的问题是：当 from 和 to 的计算值相等时，浏览器会直接跳过动画——即使你已显式添加了 animation 类。这正是本例中“仅在重保存 CSS 文件后才生效”的根本原因。
? 问题根源分析
原始代码中：
:root {
--temp-start: 0%;
--temp-end: 0%;
}且 JavaScript 中执行：
root.style.setProperty("--temp-end", `${inputTemp * 2}%`);若用户输入 0，则 --temp-end 变为 0%；即使输入 25，--temp-end 为 50%，但 --temp-start 始终是 0% —— 看似没问题。
⚠️ 关键陷阱在于：首次加载时 #indicator-1 的 height 已通过 height: var(--temp-start) 解析为 0%，而 .slide-to-temp 的 @keyframes 从 0% → 50% 是有效的。那为何动画不触发？
答案是：CSS 动画不会响应自定义属性的动态变更而自动重播。当你调用 indicator.classList.add("slide-to-temp") 时，浏览器发现该元素已存在该 class（或此前已应用过同名动画），且 height 的 computed value 未发生「可观测变更」（尤其当 --temp-start 为 0% 时，部分浏览器对 0% → X% 的过渡优化过度，甚至忽略动画帧），导致动画被静默跳过。
立即学习“前端免费学习笔记（深入）”；
更隐蔽的是：0% 作为起始值，在某些渲染上下文中（如 height: 0% 且父容器无明确 height 时）可能被解析为 0px，使 from/to 实际像素值相同，彻底取消动画。
✅ 正确解决方案
1. 设置非零初始值（避免 0→0 或无效过渡）
:root {
--temp-start: 1%; /* 关键！不可为 0% */
--temp-end: 1%;
}即使后续设为 0%，也需保证初始状态可被动画引擎识别为“可变起点”。
2. 强制动画重播：移除再添加 class（推荐）
单纯 add() 不足以触发重播。应先移除再添加，确保浏览器重新计算动画：
function changeTemp() {
const inputTemp = parseFloat(prompt("Enter a temp:") || "0");
if (isNaN(inputTemp)) return;
// 更新自定义属性
document.documentElement.style.setProperty("--temp-end", `${Math.max(0, inputTemp * 2)}%`);
// 强制重播动画：先移除再添加
indicator.classList.remove("slide-to-temp");
// 强制重排（reflow），确保移除生效
void indicator.offsetWidth;
indicator.classList.add("slide-to-temp");
}3. 替代方案：使用 transition（更简洁可靠）
相比 animation，transition 对 CSS 属性变更更敏感，且无需手动管理 class 开关：
.temp-indicator {
height: var(--temp-start);
transition: height 1s ease; /* 直接监听 height 变化 */
}
/* 移除 .slide-to-temp 和 @keyframes，简化逻辑 */JS 中仅需：
function changeTemp() {
const inputTemp = parseFloat(prompt("Enter a temp:") || "0");
if (isNaN(inputTemp)) return;
document.documentElement.style.setProperty(
"--temp-end",
`${Math.max(0, inputTemp * 2)}%`
);
// 直接更新元素 height（基于新变量）
indicator.style.height = `var(--temp-end)`;
}? 提示：transition 方案更符合本场景需求——单次高度变化，无需复杂关键帧控制。
? 注意事项总结
- ❌ 避免 0% 作为动画起始/结束值（尤其当涉及百分比高度时，父容器需有明确尺寸）；
- ✅ 使用 void element.offsetWidth 触发强制重排，确保 class 移除立即生效；
- ✅ 优先考虑 transition 而非 animation 处理基于变量的简单属性变更；
- ✅ 在 prompt 后校验输入有效性（parseFloat + isNaN），防止 NaN% 导致样式崩溃；
- ✅ 确保 .temp-container 高度固定（当前 500px 合理），否则 % 高度将失去参照。
通过以上调整，动画将稳定响应每次温度输入，无需依赖文件保存触发，真正实现“所见即所得”的交互反馈。
