CSS Web development

Fast & easy CSS Valentine’s Day Animation (Heartbeat)

You're the CSS to my HTML.
Do you like this gif? Check more gifs in the store.

Valentine’s Day is a time when people show feelings of love, so at this time you can show your love with CSS Animation!

New: Check also CSS Heart Shape & Heartbeat Animation.

*animation opened in the Safari browser.
To see the live output click here.

What do you need to do? You need to have one image of a heart in png. format (you can use mine below) and:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation
You can use my image to create a CSS Heartbeat.



<h1>Happy Valentine's Day!</h1>
<div class="container">
 <img src="" class="heart" alt="heart" />



body {
  background: #E1594C;
  text-align: center;
color: white;
.container {
  display: flex;
  justify-content: center;
  align-items: center;

.heart {
      margin: 0;
      position: relative;


Add CSS Animation

Add to .heart:

animation: .8s infinite beat;

and add @keyframes to create a Heartbeat:

@keyframes beat {
  0% {
    transform: scale(1);
  25% {
    transform: scale(1.1);
  40% {
    transform: scale(1);
  60% {
    transform: scale(1.1);
  100% {
    transform: scale(1);

To see the live output visit:

Enjoy coding!