如何实现多个select元素的闪烁动画同步？

当前你的代码中，每个设置了blinkgreen或blinkred的select会各自独立运行闪烁动画，导致不同元素的闪烁节奏不一致。下面提供两种可行的解决方法：

方法一：通过父容器统一控制动画状态 #

把闪烁动画挂载到所有select的共同父容器上，让子元素依赖父容器的动画状态来实现同步闪烁，这是纯CSS的方案，无需修改JS逻辑：

修改后的CSS代码：

/* 给共同父容器添加动画，这里用table作为父容器 */
.table-with-blink {
  animation: blink 2s infinite;
}

select[data-chosen] {
  outline-offset: 2px;
  outline: 12px solid;
}
select[data-chosen='green'] {
  outline-color: green;
}
select[data-chosen='red'] {
  outline-color: red;
}
select[data-chosen='grey'] {
  outline-color: grey;
}
/* 所有闪烁状态的select使用父容器动画控制的颜色变量 */
select[data-chosen^='blink'] {
  outline-color: var(--blink-color);
}

@keyframes blink {
  0%, 50% {
    --blink-color: initial; /* 显示对应颜色 */
  }
  51%, 100% {
    --blink-color: transparent; /* 切换为透明 */
  }
}

对应的HTML只需给table添加类名：

<table class="table-with-blink">
<tr>
<td bgcolor="#FFFFE0" style="padding:20px;">
  <select onchange=" this.dataset.chosen = this.value; ">
    <option value="blinkgreen">Running (Fine)</option>
    <option value="blinkred">Running (Issues)</option>
    <option value="green">Completed (Fine)</option>
    <option value="red">Completed (Issues)</option>
    <option value="grey">Yet to start</option>
  </select>
</td>
<td bgcolor="#FFFFE0" style="padding:20px;">
  <select onchange=" this.dataset.chosen = this.value; ">
    <option value="blinkgreen">Running (Fine)</option>
    <option value="blinkred">Running (Issues)</option>
    <option value="green">Completed (Fine)</option>
    <option value="red">Completed (Issues)</option>
    <option value="grey">Yet to start</option>
  </select>
</td>
</tr>
</table>

方法二：用JavaScript强制同步动画启动时间 #

通过JS控制所有闪烁状态的select，让它们的动画同时重启，适合需要更灵活控制的场景：

简化后的CSS：

select[data-chosen] {
  outline-offset:2px;
  outline:12px solid;
}
select[data-chosen='green'] {
  outline-color: green;
}
select[data-chosen='red'] {
  outline-color: red;
}
select[data-chosen='grey'] {
  outline-color: grey;
}
select[data-chosen^='blink'] {
  animation: blink 2s infinite;
}

@keyframes blink {
  100% {
    outline-color: transparent;
  }
}

添加JavaScript逻辑：

// 获取页面所有select元素
const selects = document.querySelectorAll('select');

// 给每个select绑定change事件，切换状态后同步动画
selects.forEach(select => {
  select.addEventListener('change', function() {
    this.dataset.chosen = this.value;
    syncBlinkAnimations();
  });
});

// 页面加载完成时初始化同步
window.addEventListener('load', syncBlinkAnimations);

function syncBlinkAnimations() {
  const blinkElements = document.querySelectorAll('select[data-chosen^="blink"]');
  
  blinkElements.forEach(el => {
    // 先移除动画，强制浏览器重绘，再重新添加动画实现同步启动
    el.style.animation = 'none';
    void el.offsetWidth; // 触发重绘
    
    el.style.animation = 'blink 2s infinite';
    // 根据状态设置对应颜色
    el.style.outlineColor = el.dataset.chosen === 'blinkgreen' ? 'green' : 'red';
  });
}

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