A CodePen by Johanna Ruiz. Stereoscopic 3D Hearts with CSS - Inspired by Simurai's demo of animated stereopscopic text. This is my take on it.

index.html

<p id="hearts">
  <span>♥</span>
  <span>♥</span>
  <span>♥</span>
  <span>♥</span>
  <span>♥</span>
</p>

style.css

body, p, span{
  padding:0;
  margin:0;
  font-size:100%;
}
#hearts{
  font-size:6em;
  text-align:center;
}
span{
  text-shadow: -0.03em 0 red,  0.03em 0 cyan;
	letter-spacing: 0.5em;
  text-align:center;
}
#hearts span{
  display:inline-block;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
	-webkit-transition: -webkit-transform 2s cubic-bezier(0, 1, 0, 1);
  -moz-transition: -moz-transform 2s cubic-bezier(0, 1, 0, 1);
  -o-transition: -o-transform 2s cubic-bezier(0, 1, 0, 1);
  transition: transform 2s cubic-bezier(0, 1, 0, 1);
}
#hearts span:hover{
  cursor:crosshair;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
  -webkit-transition: -webkit-transform .2s cubic-bezier(0, 0.75, 0, 1);
  -moz-transition: -moz-transform .2s cubic-bezier(0, 0.75, 0, 1);
  -o-transition: -o-transform .2s cubic-bezier(0, 0.75, 0, 1);
  transition: transform .2s cubic-bezier(0, 0.75, 0, 1);
}
#hearts span:active{
  text-shadow: none;
}
#hearts span:nth-child(1),
#hearts span:nth-child(5){
  font-size:1.5em;
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
#hearts span:nth-child(2),
#hearts span:nth-child(4){
  font-size:2em;
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
#hearts span:nth-child(3){
  font-size:2.5em;
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  -o-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
#hearts span{
  -webkit-animation: stars-animation 3s 50 ease-in-out;
  -moz-animation: stars-animation 3s 50 ease-in-out;
  -o-animation: stars-animation 3s 50 ease-in-out;
  animation: stars-animation 3s 50 ease-in-out;
}
@-webkit-keyframes stars-animation {
	0% { -webkit-transform: scale(1); }
	90% { -webkit-transform: scale(1); }
	95% { -webkit-transform: scale(1.3); }
	100% { -webkit-transform: scale(1); }
}
@-moz-keyframes stars-animation {
	0% { -moz-transform: scale(1); }
	90% { -moz-transform: scale(1); }
	95% { -moz-transform: scale(1.3); }
	100% { -moz-transform: scale(1); }
}
@-o-keyframes stars-animation {
	0% { -o-transform: scale(1); }
	90% { -o-transform: scale(1); }
	95% { -o-transform: scale(1.3); }
	100% { -o-transform: scale(1); }
}
@keyframes stars-animation {
	0% { transform: scale(1); }
	90% { transform: scale(1); }
	95% { transform: scale(1.3); }
	100% { transform: scale(1); }
}
#hearts span:hover{
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;
}