本文介绍一种纯 CSS 方案，让元素在白色与自身原始背景色之间无限闪烁，并支持动态初始色（无需硬编码），利用 linear() 自定义缓动函数精准控制暂停时长。
本文介绍一种纯 css 方案，让元素在白色与自身原始背景色之间无限闪烁，并支持动态初始色（无需硬编码），利用 `linear()` 自定义缓动函数精准控制暂停时长。
在 CSS 动画中，实现“闪烁回原始颜色”看似简单，实则存在一个关键限制：initial 和 inherit 在 @keyframes 中无法正确解析为元素当前计算出的 background-color 值——它们会退化为默认值（如 transparent 或浏览器初始值），导致动画意外变为白→透明/白→初始白等错误行为。
所幸，CSS 新增的 [linear() 定时函数`](https://www.php.cn/link/eb22359432e1eb9634e44567b4386d34()) 提供了突破性解法。它允许我们以分段线性方式精确声明属性变化节奏，而无需在关键帧中重复写死颜色值。
✅ 正确方案如下（兼容 Chrome 113+、Firefox 119+、Safari 17.4+）：
body {
background-color: #2a7f4f; /* 可任意设置，无需硬编码进动画 */
animation: blink 3s infinite linear(0, 0 30%, 1 50%, 0 70%, 0);
}
@keyframes blink {
to { background-color: white; }
}? 原理说明：
立即学习“前端免费学习笔记（深入）”；
-
linear(0, 0 30%, 1 50%, 0 70%, 0)表示：-
0% → 30%: 保持起始色（即body当前background-color）； -
30% → 50%: 线性过渡到to（白色）； -
50% → 70%: 线性返回起始色； -
70% → 100%: 持续保持起始色（形成第二段暂停）。
-
- 动画全程仅依赖一个
to关键帧，起始色由元素自身样式决定，完全动态、可复用。
⚠️ 注意事项：
- 若需兼容旧版浏览器（如 Safari @keyframes + 硬编码方案，并配合 CSS 自定义属性（
--base-bg）提升可维护性； -
linear()函数中百分比值必须严格递增且在0%–100%范围内，否则整条animation-timing-function将失效； - 此方法同样适用于
color、border-color等其他颜色属性，逻辑一致。
? 总结： 利用现代 CSS 的 linear() 定时函数，我们摆脱了关键帧中对初始色的硬依赖，在零 JavaScript、零重复声明的前提下，实现了真正“感知上下文”的自适应闪烁动画——既简洁，又健壮。
