CSS animation 无法触发或跳过过渡，常因 CSS 自定义属性（如 --temp-start）初始值为 0% 导致关键帧无变化；需确保起始/结束值非零且可被浏览器识别为可动画属性，并配合 transition 或正确重触发动画。
css 动画无法触发或跳过过渡，常因 css 自定义属性（如 `--temp-start`）初始值为 `0%` 导致关键帧无变化；需确保起始/结束值非零且可被浏览器识别为可动画属性，并配合 `transition` 或正确重触发动画。
在使用 CSS 自定义属性（CSS Variables）驱动 @keyframes 动画时，一个极易被忽视却致命的问题是：当 from 和 to 的计算值相等（例如都为 0%）时，浏览器会直接跳过动画，不执行任何过渡效果。这正是你遇到“仅重保存 CSS 文件才生效”现象的根本原因——重保存强制浏览器重新解析样式表，重置了变量状态并意外触发了一次完整动画流程；而后续变更则因 --temp-start 始终为 0%，导致 from: 0% → to: X% 实际变为 0% → X%，但若 X% 也为 0%（如输入 0），或动画未被正确重置，就会出现“瞬间跳变、无过渡”。
? 核心修复点
避免 0% 作为初始动画值
将 :root 中的 --temp-start: 0% 改为 --temp-start: 1%（或其他非零最小值）。因为 height: 0% 在多数布局上下文中等效于 height: 0px，且当 from 和 to 同为 0% 时，CSS 动画引擎判定无可动画变化，直接应用终态。确保动画可被重复触发
单纯 classList.add("slide-to-temp") 在首次添加后，若类已存在，再次添加不会重放动画。正确做法是：先移除再添加，或利用 animation-name 的重触发机制（需配合 animation-duration 和 animation-fill-mode）。更稳健的写法如下：
function changeTemp() {
const inputTemp = parseFloat(prompt("Enter a temp:") || "0");
const targetHeight = Math.max(1, inputTemp * 2); // 防止 0%，确保 ≥1%
root.style.setProperty("--temp-end", `${targetHeight}%`);
// 强制重播动画：移除类 → 强制重排 → 重新添加
indicator.classList.remove("slide-to-temp");
void indicator.offsetWidth; // 触发重排（reflow），清空上一次动画状态
indicator.classList.add("slide-to-temp");
}
-
补充 transition 作为备选方案（更简洁可靠）
相比依赖 animation + @keyframes，对 height 这类支持过渡的属性，直接使用 transition 更自然、易维护：
.temp-indicator {
height: var(--temp-start);
transition: height 1s ease; /* 替代 animation */
}
function changeTemp() {
const inputTemp = parseFloat(prompt("Enter a temp:") || "0");
const targetHeight = Math.max(1, inputTemp * 2);
root.style.setProperty("--temp-end", `${targetHeight}%`);
// 直接更新 height —— transition 自动生效
indicator.style.height = `var(--temp-end)`;
}
✅ 推荐最终方案：移除 @keyframes 和 .slide-to-temp 类，改用 transition + 内联 style.height 更新。它规避了 CSS 变量在 @keyframes 中的动态解析延迟问题，兼容性更好，逻辑更直观。
⚠️ 注意事项
- height 的动画/过渡要求元素具有明确的 display（如 block）和非 auto 的 height 基准值（你的 #indicator-1 已满足）；
- mask 属性虽不影响动画逻辑，但需注意其浏览器兼容性（Safari 需 -webkit-mask 前缀）；
- 输入校验不可少：prompt() 返回字符串，务必 parseFloat() 并处理 NaN；
- 若坚持用 animation，请始终保证 from ≠ to，且每次动画前重置类名以触发重播。
通过以上调整，动画将稳定响应每次温度输入，无需手动保存 CSS 文件——这才是前端交互应有的确定性体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
