<div class="heart">&#x2665;</div>
<h1>Follow the heartbeat</h1>

/* just some  styling*/
body { 
  text-align: center; 

}

/* heart div class - in html i used just a simple html simbol entity for heart sign, you can use text or whatever u want*/

.heart {
  font-size: 150px;
  color: #e00;
  animation: beat .25s infinite alternate;
  transform-origin: center;
}

/* Heart beat animation */
@keyframes beat{
  to { transform: scale(1.4); }
}

/* we are using prefix free for this example

for prefixed code it would look like this


body {
  text-align: center;
}


.heart {
  font-size: 150px;
  color: #e00;

  -webkit-animation: beat .25s infinite alternate;
  -moz-animation: beat .25s infinite alternate;
  -ms-animation: beat .25s infinite alternate;
  -o-animation: beat .25s infinite alternate;
  animation: beat .25s infinite alternate;

  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}


@keyframes "beat" {
 to {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);
 }

}

@-moz-keyframes beat {
 to {
   -moz-transform: scale(1.4);
   transform: scale(1.4);
 }

}

@-webkit-keyframes "beat" {
 to {
   -webkit-transform: scale(1.4);
   transform: scale(1.4);
 }

}

@-ms-keyframes "beat" {
 to {
   -ms-transform: scale(1.4);
   transform: scale(1.4);
 }

}

@-o-keyframes "beat" {
 to {
   -o-transform: scale(1.4);
   transform: scale(1.4);
 }

} */