Hiệu ứng Flash (Chớp lóe) với CSS

Hiệu ứng Flash

Hiệu ứng Flash làm phần tử **chớp lóe** bằng cách thay đổi opacity giữa 1 (hiện) và 0 (ẩn) tại các mốc thời gian cụ thể. Hiệu ứng đơn giản nhưng thu hút sự chú ý tốt.

Keyframes

@keyframes flash {
  0%, 50%, 100% { opacity: 1; }  /* Hiện tại 0%, 50%, 100% */
  25%, 75% { opacity: 0; }       /* Ẩn tại 25%, 75% */
}

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      width: 100px; height: 100px;
      background: #FFEB3B;
      animation-duration: 1s;
      animation-fill-mode: both;
    }
    @keyframes flash {
      0%, 50%, 100% { opacity: 1; }
      25%, 75% { opacity: 0; }
    }
    .flash { animation-name: flash; }
  </style>
</head>
<body>
  <div class="animated flash"></div>
  <button onclick="location.reload()">Chạy lại</button>
</body>
</html>

Tùy chỉnh

• Số lần chớp: Thêm các cặp % (ví dụ: 12.5%, 37.5%, 62.5%, 87.5% cho 4 lần chớp)
• Tốc độ: Giảm animation-duration (VD: 0.5s)
• Lặp lại: Thêm animation-iteration-count: 3; hoặc infinite
• Màu sắc: Kết hợp với background-color keyframes để đổi màu khi chớp

Ứng dụng

• Thông báo lỗi/quan trọng (error notification)
• Call-to-action button nhấp nháy
• Loading indicator
• Game: hiệu ứng bị đánh trúng, power-up

Lưu ý UX

Tránh lạm dụng flash - có thể gây khó chịu hoặc kích động co giật quang quang (photosensitive epilepsy). Tuân thủ WCAG: không chớp > 3 lần/giây.