Beating heart with CSS3

heart.css

.heart { 
  	width: 20em;
		height: 20em;
		position: relative;
		overflow: hidden;
}
.heart span {
		display: block;
		position: absolute;
  	width: 10em;
		height: 16em;
  	background-color: #c50011;
  -webkit-border-top-left-radius: 10em;
  -webkit-border-top-right-radius: 10em;
   -moz-border-radius-topleft: 10em;
   -moz-border-radius-topright: 10em;
  	border-top-left-radius: 10em;
		border-top-right-radius: 10em;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}
.heart span.left {
	 -o-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
   -moz-transform:rotate(-45deg);
		left: 2.85em;
		bottom: 2.2em;
  -webkit-border-bottom-right-radius: 10em;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-topleft: 10em;
  -moz-border-radius-bottomleft: 0;
		border-bottom-right-radius: 10em;
		border-bottom-left-radius: 0;
  -webkit-animation-name: shadows-side;
}
.heart span.right {
	 -o-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 10em;
   -moz-border-radius-bottomright: 0;
   -moz-border-radius-bottomleft: 10em;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 10em;
		left: 7.1em;
		bottom: 2.2em;
    -webkit-animation-name: shadows;
}
.heart {
  -webkit-animation-name: beat;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
  color:red;
}
 #colophon {
  color:#e1e1e1;
  position:fixed;
  bottom:5%;
  right: 0;
}
#colophon a{
  text-decoration: none;
  color: inherit;
}
@-webkit-keyframes shadows {
 from {
    box-shadow: .4875em .1875em .1875em rgba(90, 90, 90, .5);
      }
 to {
    box-shadow: .875em .3875em .4875em rgba(90, 90, 90, .35);
    }
}
@-webkit-keyframes shadows-side {
 from {
    box-shadow: -.4875em .1875em .1875em rgba(90, 90, 90, .5);
}
 to {
    box-shadow: -.0875em .3875em .4875em rgba(90, 90, 90, .35);
 }
}
@-webkit-keyframes beat {
 from {
-webkit-transform:scale(.75);
}
 to {
  -webkit-transform: scale(1.5);
 }
}

heart.html

<div class="heart">
  		<span class="left"></span><br>
		<span class="right"></span>
</div>

For details or whatnot on how to make a CSS3 animated beating heart, see my blog post: http://blog.frankmtaylor.com/2012/02/14/happy-valentines-day-with-a-css3-heart/