border-color闪烁必须用@keyframes配合animation实现，transition仅支持状态切换；需指定全向颜色值、避免border简写、使用可插值颜色、设linear时序与0.4s~0.8s时长，并注意无障碍与性能。
border-color 闪烁必须用 animation，不能只靠 transition
transition 只能做状态切换，比如 hover 时变色；要周期性反复闪烁，必须用 @keyframes 配合 animation。常见错误是写了个 transition: border-color 0.5s 就以为能闪，结果只闪一次或根本不闪。
- 闪烁本质是「颜色在多个值之间循环」，
animation才支持多帧、重复、无限播放 -
border-color是可动画属性（CSS Transitions Level 2 明确支持），但必须写全四个方向值（如border-color: red）或分别指定（border-top-color等），否则部分浏览器可能不触发动画 - 别用
border: 1px solid red动画——border是简写，动画时会重置所有子属性，容易导致边框宽度/样式意外变化
关键帧里颜色值必须明确且可插值
不是所有颜色写法都能被浏览器平滑过渡。比如 currentcolor、transparent 或自定义 CSS 变量（未设初始值）会导致动画卡在第一帧或跳变。
- 推荐用十六进制（
#ff0000）、rgb（rgb(255, 0, 0)）或命名色（red），三者可互相插值 - 避免在
@keyframes中混用单位不一致的写法，比如from { border-color: #f00; }和to { border-color: rgb(255, 0, 0); }虽然等价，但某些旧版 Safari 会拒绝动画 - 如果想从「无边框」闪到「有边框」，不要用
border: none→border: 1px solid red，而应固定border-width: 1px，只动画border-color，否则宽度变化会引发重排
animation 属性要控制好 timing-function 和 iteration-count
默认 animation-timing-function: ease 会让闪烁显得拖沓，而 infinite 不加 animation-direction 容易让颜色“弹回”造成视觉断层。
- 闪烁类动画建议用
linear：节奏均匀，更符合“闪烁”直觉 - 加
animation-direction: alternate可让颜色来回渐变（比如红→蓝→红），比单纯单向循环更自然 - 别漏写
animation-duration：小于 0.3s 人眼难分辨，大于 1.2s 显得迟钝；常用区间是0.4s ~ 0.8s - 注意
animation-fill-mode: forwards对闪烁无效——因为动画是循环的，forwards没意义，不用加
兼容性与性能要注意这些细节
现代浏览器基本都支持 border-color 动画，但老版本 Android WebView（≤4.4）和 IE10 以下完全不支持。另外，高频闪烁可能触发部分屏幕的 PWM 调光敏感反应。
- 移动端建议加
will-change: border-color（仅当该元素频繁闪烁时），但别滥用，否则可能引发额外图层合成开销 - 如果页面中有多处闪烁元素，避免全部用相同
animation-name+ 同步启动，会导致渲染线程集中调度压力；可加随机animation-delay: -0.1s错峰 - 无障碍方面：持续闪烁超过 3 次/秒可能触发癫痫风险，WCAG 2.1 明确禁止。真实项目中，务必提供关闭开关（比如通过 class 切换停用
animation: none）
实际用的时候，最常被忽略的是边框宽度和样式的稳定性——颜色在闪，但宽度或样式跟着变，用户第一反应不是“在闪烁”，而是“边框在抖”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
