Tạo icon trái tim có nhịp đập bằng html & css

Một số website có icon trái tim nhịp đập ở dưới footer khá là hay ho. Sau đây mình sẽ hướng dẫn các bạn hiệu ứng như vậy bằng fontawesome
HTML bạn muốn hiển thị ở đâu thì copy vào đấy

<p class="heart">
  <i class="fa fa-heart fa-4x fa-beat"></i>
</p>

CSS

.fa-beat {
  animation:fa-beat 5s ease infinite;
}
@keyframes fa-beat {
  0% {
    transform:scale(1);
  }
  5% {
    transform:scale(1.25);
  }
  20% {
    transform:scale(1);
  }
  30% {
    transform:scale(1);
  }
  35% {
    transform:scale(1.25);
  }
  50% {
    transform:scale(1);
  }
  55% {
    transform:scale(1.25);
  }
  70% {
    transform:scale(1);
  }
}

.heart {
  color:red;
}

Có thể đổi màu lửa hoặc tốc độ nhịp đập ở CSS tuỳ ý bạn nhé.
Demo bạn có thể xem ở footer website mình.

Chúc bạn thành công. Have a nice day.
Vui lòng ghi rõ nguồn khi chia sẻ. Thanks.