<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);
 }

} */