สร้างเอฟเฟกต์ Flash (กระพริบ) ด้วย CSS Animation

เอฟเฟกต์ Flash

องค์ประกอบกระพริบสว่าง-มืด สลับกัน ไม่มีการเคลื่อนย้ายตำแหน่งหรือหมุน ใช้สำหรับดึงดูดความสนใจ (attention seeker)

โค้ดตัวอย่างสมบูรณ์

<html>
<head>
  <style>
    .animated {
      background-image: url(/css/images/logo.png);
      background-repeat: no-repeat;
      background-position: left top;
      padding-top: 95px;
      margin-bottom: 60px;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }

    @keyframes flash {
      0%, 50%, 100% { opacity: 1; }
      25%, 75%      { opacity: 0; }
    }

    .flash {
      animation-name: flash;
    }
  </style>
</head>
<body>
  <div id="animated-example" class="animated flash"></div>
  <button onclick="myFunction()">Reload page</button>
  <script>
    function myFunction() { location.reload(); }
  </script>
</body>
</html>

การวิเคราะห์ Keyframes

การปรับแต่ง

.flash-fast {
  animation: flash 0.5s ease-in-out 3; /* 3 รอบ เร็ว */
}

.flash-slow {
  animation: flash 2s ease-in-out infinite; /* วนลูปช้า */
}

.flash-once {
  animation: flash 1s ease-in-out 1 forwards; /* 1 รอบ คงสถานะสุดท้าย */
}

กรณีการใช้งาน

• แจ้งเตือนข้อผิดพลาด (form validation)
• Notification ใหม่เข้ามา
• Call-to-action button
• Loading indicator