CSS 动画未按预期执行，常因初始值为 0% 导致动画起止值相同而被浏览器跳过；需确保 --temp-start 与 --temp-end 初始值不同，并通过强制重排或 transition + height 重置策略保障动画可触发。
css 动画未按预期执行，常因初始值为 `0%` 导致动画起止值相同而被浏览器跳过；需确保 `--temp-start` 与 `--temp-end` 初始值不同，并通过强制重排或 `transition` + `height` 重置策略保障动画可触发。
你遇到的问题本质是 CSS 动画的“零值陷阱”与浏览器渲染优化机制共同导致的动画不触发。当 --temp-start: 0% 且 --temp-end 被设为 0%（例如输入 0 或 0.5 → 1% 仍可能被四舍五入/计算为 0%），@keyframes 的 from 和 to 实际等效，浏览器会直接跳过动画——这正是你“重保存 CSS 文件后才生效”的原因：文件保存触发了样式表重载，强制重置了元素状态，使后续动画得以启动。
但根本解法不是依赖手动保存，而是从原理上确保动画具备可触发性：
✅ 正确做法：避免零值冲突 + 强制动画重播
-
初始化非零起始值
将 :root 中的 --temp-start 设为 1%（而非 0%），保证 from 与 to 始终存在差异：:root { --temp-start: 1%; /* 关键：不可为 0% */ --temp-end: 1%; } -
使用 transition 替代 animation（更可靠）
animation 依赖 animation-name 变更才能重播，而 transition 在 CSS 属性值变化时自动触发。推荐改用 height 过渡：.temp-indicator { height: var(--temp-start); transition: height 1s ease-out; /* 直接过渡 height */ }对应 JS 中只需更新变量：
function changeTemp() { const inputTemp = parseFloat(prompt("Enter a temp:")) || 0; document.documentElement.style.setProperty("--temp-end", `${Math.max(1, inputTemp * 2)}%`); // 强制重排：先读取当前 height，再设置新值，确保 transition 触发 indicator.offsetHeight; // 触发 reflow indicator.style.height = `var(--temp-end)`; } -
若坚持用 animation，需手动重播
通过移除再添加 class 实现强制重播：function changeTemp() { const inputTemp = parseFloat(prompt("Enter a temp:")) || 0; document.documentElement.style.setProperty("--temp-end", `${Math.max(1, inputTemp * 2)}%`); indicator.classList.remove("slide-to-temp"); // 强制重排 void indicator.offsetWidth; indicator.classList.add("slide-to-temp"); }
⚠️ 注意事项
- 不要依赖 0% 作为有效起始值：CSS 自定义属性在 0% 时易与计算结果（如 0 * 2 = 0）混淆，导致 from/to 相同。
- transition 比 animation 更适合动态数值驱动的 UI 变化：它天然响应属性变更，无需手动管理播放状态。
- offsetHeight / offsetWidth 是安全的重排触发器：无副作用，兼容性好，能确保浏览器重新计算样式后再应用新值。
✅ 最终推荐代码结构（精简可靠版）
.temp-indicator {
height: 1%; /* 初始高度 */
transition: height 1s cubic-bezier(0.2, 0.8, 0.4, 1);
}
function changeTemp() {
const temp = Math.max(1, (parseFloat(prompt("Enter a temp:")) || 0) * 2);
indicator.style.height = `${temp}%`;
}
这样既规避了自定义属性动画的隐式限制，又实现了平滑、可预测的高度过渡效果——无需保存文件，每次输入均立即生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
