必须用@keyframes定义颜色闪烁动画，不存在animation-color等属性；需严格匹配名称、控制频率、适配prefers-reduced-motion并手动降级JS动画。
颜色闪烁动画必须用 @keyframes 定义，别信 animation-color 这类不存在的属性
浏览器根本不支持 animation-color 或 animation-background-color 这类 CSS 属性——它们是常见误解。真正起效的只有标准的 @keyframes + animation 组合。比如想让文字红黑交替闪烁，得这样写：
@keyframes blink-text {
0% { color: #000; background-color: #fff; }
50% { color: #fff; background-color: #f00; }
100% { color: #000; background-color: #fff; }
}
.blink { animation: blink-text 1.2s infinite; }关键点：
-
@keyframes名和animation-name值必须完全一致（包括大小写、连字符），拼错一个字母就静默失效 - 避免用纯黑
#000↔ 纯红#f00这种高对比组合，WCAG 明确建议闪烁频率低于 3Hz 或高于 50Hz，日常警示选1.2s–2s周期更安全 - 闪烁动画若停在中间帧（如
animation-fill-mode: forwards），可能残留错误背景色，导致后续交互状态混乱
@media (prefers-reduced-motion: reduce) 要覆盖所有触发点
只给闪烁元素加 animation: none 不够——第三方组件、CSS 框架、甚至内联样式都可能绕过你的选择器。最稳妥的做法是全局重置：
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
/* 补一刀：强制瞬时渲染，防 JS 直接改 style */
* { animation-duration: 0.01ms !important; }
}这样做能拦截三类常见漏网之鱼：
立即学习“前端免费学习笔记（深入）”；
- CSS 框架里预设的
.alert--flash类 - 通过
element.style.animation = '...'动态添加的内联动画 - 某些库用
transform或opacity模拟的“伪闪烁”，虽无animation但仍有插值过渡
JS 驱动的闪烁必须手动降级，媒体查询管不了它
CSS 媒体查询对 requestAnimationFrame、gsap.to()、setTimeout 轮询改色等 JS 动画完全无效。你得主动监听并切换逻辑：
const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
function applyBlink(element) {
if (motionQuery.matches) {
// 直接设终态，不闪
element.style.color = '#f00';
element.style.backgroundColor = '#fff';
return;
}
// 启动 CSS 动画或 JS 动画
element.classList.add('blink');
}
// 初始检测 + 监听变化
applyBlink(document.querySelector('.warning'));
motionQuery.addEventListener('change', () => applyBlink(document.querySelector('.warning')));注意：
- 别只在页面加载时检查一次，用户可能中途在系统设置里开关该偏好
- 如果用了动画库（如 GSAP），需在每个
gsap.to()前加if (!motionQuery.matches)判断 - 轮播图、骨架屏、表单错误提示这类高频闪烁场景，建议提前准备无动画 fallback 版本（例如静态高亮 + 图标）
测试时别只靠眼睛看，要用 DevTools 强制触发
用户是否开启减少动画，取决于操作系统设置，不是浏览器开关。开发时不能等真机测试——Chrome / Edge / Safari 的 DevTools 都提供模拟入口：
- 右键页面 → “检查” → 打开 DevTools
- Windows/Linux 按
Ctrl+Shift+P，macOS 按Cmd+Shift+P，输入 “reduced motion” - 选择 “Emulate prefers-reduced-motion: reduce”
此时页面应立刻失去所有闪烁、滑入、缩放等效果。如果还有残余动画，说明有以下可能：
- 某个
@keyframes没被*选择器捕获（比如用了 Shadow DOM 封装） - JS 动画没监听
matchMedia变化 - 第三方脚本（如广告、分析 SDK）自己注入了动画且未适配
真实用户环境里，这些漏掉的点往往比主业务代码更难排查。
