<p class="heart">&hearts;</p>
<h1>I love you more than CSS animations.<br> And I really love those.</h1>
<p class="fine-print">pulsing heart CSS animation made with &lt;3 by <a href="http:/twitter.com/brnnbrn">@brnnbrn</a></p>

@keyframes beat {
	from {
		transform: scale(1);
		transform-origin: center center;
		animation-timing-function: ease-out;
	}
	10% {
		transform: scale(1.1);
		animation-timing-function: ease-in;
	}
	15% {
		transform: scale(1);
		animation-timing-function: ease-out;
	}
	25% {
		transform: scale(1.05);
		animation-timing-function: ease-in;
	}
  35% {
    transform: scale(1);
		animation-timing-function: ease-out;
  }
}

body {
  background: #c0392b;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 10px rgba(0,0,0,0.3);
  padding: 4em;
  overflow: hidden;
}

h1 {
  line-height: 1.3;
  margin-bottom: 2em;
}

p {
  margin: 0;
}

a {
  color: #333;
  text-decoration: none;
  text-shadow: none;
  &:hover {color: lighten(#e74c3c, 10);}
 }

.heart {
  font-size:  100px;
  text-align: center;
  color: lighten(#e74c3c, 5);
  animation: beat 1s infinite;
}

.fine-print {
  font-size: 12px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js