Hiệu ứng Pulse (Nhịp đập) với CSS

Hiệu ứng Pulse

Hiệu ứng Pulse làm phần tử **phóng to và thu nhỏ** theo nhịp đập - scale từ 1 → 1.1 → 1. Rất phổ biến cho loading spinner, notification badge, call-to-action button.

Keyframes đơn giản

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }  /* Phóng to 10% */
  100% { transform: scale(1); }   /* Về gốc */
}

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      width: 100px; height: 100px;
      background: #FF5722;
      border-radius: 50%; /* Hình tròn đẹp hơn cho pulse */
      animation-duration: 1.5s;
      animation-iteration-count: infinite; /* Lặp vô hạn */
      animation-timing-function: ease-in-out;
      animation-fill-mode: both;
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    .pulse { animation-name: pulse; }
  </style>
</head>
<body>
  <div class="animated pulse"></div>
  <button onclick="location.reload()">Chạy lại</button>
</body>
</html>

Các biến thể Pulse

Ví dụ Pulse Box-shadow (Ring pulse)

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(255, 87, 34, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0); }
}
.pulse-ring { animation: pulse-ring 2s infinite; }

Mẹo hiệu năng

• Dùng transform: scale() thay vì thay đổi width/height (GPU accelerated)
• Thêm will-change: transform cho animation liên tục
• Tránh pulse trên quá nhiều phần tử cùng lúc