本文介绍一种纯 CSS 方案，让元素在白色与自身原始背景色之间无限闪烁，并支持动态初始色——无需硬编码颜色值，且通过 linear() 定时函数精准控制暂停时段。
本文介绍一种纯 css 方案，让元素在白色与自身原始背景色之间无限闪烁，并支持动态初始色——无需硬编码颜色值，且通过 `linear()` 定时函数精准控制暂停时段。
在 CSS 动画中，若希望元素“闪烁”（即短暂变色后返回原始背景色），传统做法往往需在 @keyframes 中显式写出起始色（如 green），导致样式复用性差、维护成本高。而直接使用 initial 或 inherit 无法奏效——因为 initial 对 background-color 的计算值是 transparent，inherit 则依赖父元素，均不等于元素自身的声明值。
真正可行的解法是：利用 CSS 新增的 linear() 自定义缓动函数 + 单帧动画逻辑。
核心思路是：
- 动画仅定义一个变化方向（
to { background-color: white; }）； - 通过
animation-timing-function: linear(0, 0 30%, 1 50%, 0 70%, 0)精确控制各时间点的插值状态：-
0表示原始色（动画起点值）； -
1表示目标色（白色）； - 中间
0 30%和0 70%实现“保持原色”的暂停段； -
1 50%实现瞬时切换至白色并维持（视觉上为“闪”）。
-
✅ 完整可运行示例：
.blinking-box {
background-color: #2563eb; /* 任意初始色 —— 支持变量、主题色、甚至 CSS 自定义属性 */
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+）已全面支持，但旧版 Safari 需加-webkit-linear()前缀（实际兼容性建议以 caniuse 数据 为准）；- 此方案完全依赖 CSS 声明顺序和计算值，不要在动画过程中通过 JS 修改
background-color，否则会干扰linear()对起始色的捕获；- 若需适配深色模式，可结合
@media (prefers-color-scheme: dark)覆盖background-color，动画将自动响应新初始值。
该方法摒弃了冗余关键帧，以声明式时序逻辑替代硬编码色彩，既满足“无限闪烁+暂停+回归原色”的全部需求，又具备高度可复用性与主题友好性，是现代 CSS 动画工程实践中的优雅范式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
