如何使CSS闪烁动画在多元素间保持同相位同步？

你遇到的问题本质是：每个DOM元素的动画会在自身完成渲染时启动计时，分批加载的元素自然会有不同的动画起始时间，导致相位错位。要实现基于系统时间的统一同步闪烁，可以用以下方案：

方案一：通过JS计算统一动画延迟（兼容性最优） #

步骤1：调整CSS动画定义 #

确保动画的时间函数为线性，避免相位计算误差：

@keyframes blink {
  0%, 100% { border-color: @alert-red; }
  50% { border-color: #f0f2f5; }
}
.statusAnimation {
  border-left: 8px solid @alert-red;
  animation: blink 1.8s linear infinite;
}

步骤2：用JS统一对齐相位 #

通过系统时间计算每个元素的动画延迟，让所有元素直接跳到当前时间对应的动画阶段，而非从0开始：

const ANIMATION_DURATION = 1.8; // 必须和CSS中的动画时长保持一致

// 给单个元素设置同步延迟
function syncBlink(element) {
  const currentTimeInSeconds = Date.now() / 1000;
  // 计算当前时间在动画周期内的偏移量
  const phaseOffset = currentTimeInSeconds % ANIMATION_DURATION;
  // 设置负延迟，让动画直接跳转到当前周期的对应位置
  element.style.animationDelay = `-${phaseOffset}s`;
}

// 初始化现有元素
document.querySelectorAll('.statusAnimation').forEach(syncBlink);

// 动态添加元素时，在插入DOM前调用syncBlink
// 示例：
// const newCard = document.createElement('div');
// newCard.classList.add('statusAnimation');
// syncBlink(newCard);
// cardContainer.appendChild(newCard);

方案二：用CSS变量+@property实现全局同步（需现代浏览器支持） #

如果你的目标浏览器支持CSS @property（Chrome 85+、Firefox 97+），可以通过全局共享的动画变量实现同步：

步骤1：定义可继承的CSS变量 #

/* 定义可动画、可继承的相位变量 */
@property --blink-phase {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@keyframes blink {
  0% { 
    --blink-phase: 0;
    border-color: @alert-red; 
  }
  50% { 
    --blink-phase: 1;
    border-color: #f0f2f5; 
  }
  100% { 
    --blink-phase: 0;
    border-color: @alert-red; 
  }
}

.statusAnimation {
  border-left: 8px solid @alert-red;
  animation: blink 1.8s linear infinite;
}

步骤2：全局同步相位 #

通过JS基于系统时间更新根元素的相位变量，所有子元素会自动继承当前相位：

const ANIMATION_DURATION = 1.8;

function updateGlobalPhase() {
  const currentTimeInSeconds = Date.now() / 1000;
  const phase = (currentTimeInSeconds % ANIMATION_DURATION) / ANIMATION_DURATION;
  document.documentElement.style.setProperty('--blink-phase', phase);
}

// 初始化时设置一次，然后按动画周期更新
updateGlobalPhase();
setInterval(updateGlobalPhase, ANIMATION_DURATION * 1000);

核心原理 #

两种方案都是让动画的时间基准从元素渲染时间切换为系统时间，确保所有元素的闪烁相位始终对齐，不管是初始加载还是分批渲染的元素，都能保持同步。

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