使用 CSS @keyframes 配合 linear() 自定义缓动函数，可在不硬编码初始颜色的前提下，让元素无限闪烁至白色后精准返回其原始背景色。
使用 css `@keyframes` 配合 `linear()` 自定义缓动函数，可在不硬编码初始颜色的前提下，让元素无限闪烁至白色后精准返回其原始背景色。
在纯 CSS 动画中，实现“闪烁回原始颜色”而非固定色值（如 green），关键在于避免在 @keyframes 中显式声明起始/结束色值——因为一旦写死（如 30% { background-color: green; }），就丧失了样式复用性和上下文适应性。
现代 CSS 提供了更优雅的解法：animation-timing-function: linear() 的分段语法（即 linear(0, 0 30%, 1 50%, 0 70%, 0)），它允许我们定义动画过程中属性值的精确插值路径，而无需在关键帧中重复指定颜色。
✅ 核心原理：
-
@keyframes blink { to { background-color: white; } }定义了唯一变化：从当前计算出的初始色 → 白色； -
linear(0, 0 30%, 1 50%, 0 70%, 0)控制background-color的数值变化节奏：-
0→ 起始值（即元素自身的background-color，由body { background-color: green; }等实际声明决定）； -
0 30%→ 在 0%–30% 时段保持起始色（“暂停”）； -
1 50%→ 在 30%→50% 线性过渡到white（1表示目标值的 100%，即to所定义的white）； -
0 70%→ 在 50%→70% 线性返回起始色（0表示目标值的 0%，即回到原始色）； - 最后
0→ 70%–100% 保持起始色，完成循环。
-
? 完整可运行示例：
立即学习“前端免费学习笔记（深入）”；
body {
background-color: #2a5c82; /* 任意初始色 —— 可动态修改，无需改动画代码 */
animation: blink 3s infinite linear(0, 0 30%, 1 50%, 0 70%, 0);
}
@keyframes blink {
to { background-color: white; }
}⚠️ 注意事项：
-
linear()分段语法是 CSS Easing Functions Level 2 规范特性，已获 Chrome 109+、Firefox 111+、Safari 16.4+ 全面支持（caniuse.com）；旧版浏览器需降级为传统steps()或cubic-bezier()模拟，但将失去“自动回原始色”的灵活性； -
inherit/initial在@keyframes中无效，是因为动画会覆盖继承链，且initial是关键字重置值（非计算值），无法参与颜色插值； - 此方案完全依赖 CSS 计算流程，无需 JS 干预，符合“CSS-only”约束，且天然支持 CSS 变量（如
background-color: var(--theme-bg);），进一步提升主题适配能力。
总结：通过分离「动画逻辑」（linear() 节奏控制）与「样式声明」（background-color 原始值），我们实现了真正可复用、上下文感知的闪烁动画——无论元素初始色是 #ff6b35、rgba(0,0,0,0.1) 还是 CSS 变量，动画均能正确读取并往返。
