如何实现CSS无限闪烁动画并还原元素初始背景色？

问题描述 #

需要实现一个盒子的无限闪烁效果，要求：

• 无限循环闪烁
• 闪烁至白色后还原为元素初始颜色
• 每次循环间有停顿（颜色保持不变）
• 仅用CSS实现，不涉及JS

现有代码满足效果，但采用硬编码颜色的方式。希望仅在目标元素（示例中为body）上设置背景色，让动画闪烁至白色后自动还原为该元素的初始背景色。目前在@keyframes中使用inherit或initial会导致颜色还原为白色，无法达到预期。

现有硬编码代码 #

body {
  animation: blink 3s infinite ease-in-out;
  background-color: green;
}

@keyframes blink {
  30% {background-color: green;}
  50% {background-color: white;}
  70% {background-color: green;}
}

解决方案：使用CSS自定义属性（变量） #

通过定义CSS变量存储初始背景色，在关键帧中引用该变量即可实现无需硬编码的效果，步骤如下：

1. 在目标元素上定义背景色变量，并将元素背景色绑定到该变量
2. 在@keyframes中，使用变量代替硬编码的初始颜色值

修改后的代码：

body {
  --initial-bg: green; /* 定义初始背景色变量 */
  background-color: var(--initial-bg);
  animation: blink 3s infinite ease-in-out;
}

@keyframes blink {
  30% { background-color: var(--initial-bg); }
  50% { background-color: white; }
  70% { background-color: var(--initial-bg); }
}

说明 #

• 只需修改元素上的--initial-bg变量值，动画就会自动还原到对应的初始颜色，无需改动关键帧代码
• inherit和initial无法满足需求的原因：inherit会继承父元素的背景色，initial会使用浏览器默认背景色（通常为白色），都不是元素自身设置的初始颜色，而CSS变量可以精准引用元素的自定义初始值

内容的提问来源于stack exchange，提问作者Maze