CSS动画闪烁效果实现方法与优化技巧

网页中偶尔需要让某个按钮或提示信息“跳出来”引起用户注意，比如促销倒计时、新消息提醒或者表单提交成功后的反馈。这时候，给元素加个闪烁效果就挺管用。CSS动画正好能轻松实现这种视觉变化，还不用依赖JavaScript。

基本的闪烁动画原理

CSS的@keyframes规则可以定义动画的关键帧，通过在透明度之间切换，就能做出闪烁的感觉。比如让一个元素反复淡入淡出：

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  50.01%, 100% {
    opacity: 0;
  }
}

.blink-effect {
  animation: blink 1s infinite;
}

把这个类加到任意HTML元素上，它就会开始闪烁。比如一个提示框：

<div class="blink-effect">您有新的订单！</div>

控制闪烁频率和持续时间

上面的例子每秒闪一次，节奏比较快。如果想让它温和一点，可以把动画时长调成1.5秒甚至2秒。无限循环是靠infinite实现的，如果只想闪三次，可以写成animation: blink 1s 3;。

避免干扰用户体验

别小看这个效果，用多了真让人眼晕。特别是对于视力敏感的用户，快速闪烁可能引发不适。WCAG建议动画停留时间不少于0.5秒，且不建议使用高频闪烁（每秒超过3次）。所以实际项目里，可以用稍微慢一点的节奏，比如1.5秒一周期，看起来更友好。

换个方式：背景色脉动

如果你觉得透明度变化太刺眼，可以试试改变背景色，做一种“呼吸灯”式的效果：

@keyframes pulse {
  0% {
    background-color: #ffcccc;
  }
  50% {
    background-color: #ffffff;
  }
  100% {
    background-color: #ffcccc;
  }
}

.pulse-notice {
  padding: 10px;
  animation: pulse 2s ease-in-out infinite;
}

这种效果更适合用于系统通知或待办事项的高亮，既明显又不会太突兀。

结合:hover提升交互感

有时候你不想让元素一直闪，而是等用户鼠标移上去才触发。这时候用:hover配合动画就行：

.hover-blink:hover {
  animation: blink 0.6s 3;
}

这样当用户把指针移到“立即购买”按钮上时，连闪三下，增加点击欲望，又不会长期干扰页面。

移动端适配小提醒

手机屏幕小，元素一闪一灭更容易分散注意力。建议在移动布局中降低动画频率，或者干脆用媒体查询关掉：

@media (max-width: 768px) {
  .blink-effect {
    animation: none;
    opacity: 1;
  }
}