CSS Heart beating

We can make a heart with just css even having the only div.

  
<div id="heart"></div>

The most tricky part is to draw a heart. Luckily, it is pretty simple - it can be composed of 3 shapes - square and 2 circles. Square will be described with main css class, and 2 circles with ::before and ::after pseudo classes

And beating will be implemented with css @keyframe animation

Now let's have a look at the whole css.

  
:root{
  --width: 80px;
  --color: rgb(255, 51, 0);
}


#heart{
  width: var(--width);
  height: var(--width);
  margin-left: 40px;
  background: var(--color);
  background-image: var(--color_gradient);
  border-color: transparent;
  border-style: solid;
  border-width: 0px;
  transform: rotate(45deg);
  animation-name: heartbeat;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

#heart::before{
  content: "";
  width: var(--width);
  height: var(--width);
  position: absolute;
  transform: translateX(-50%);
  background: var(--color);
  background-image: var(--color_gradient);
  border-color: transparent;
  border-style: solid;
  border-width: 0px;
  border-radius: 50%;
}

#heart::after{
  content: "";
  width: var(--width);
  height: var(--width);
  position: absolute;
  transform: translateY(-50%);
  background: var(--color);
  background-image: var(--color_gradient);
  border-color: transparent;
  border-style: solid;
  border-width: 0px;
  border-radius: 50%;
}


@keyframes heartbeat{
  0% {transform: scale(1.0) rotate(45deg);}
  20% {transform: scale(1.1) rotate(45deg);}
  100% {transform: scale(1.0) rotate(45deg);}

You can try it on JSFiddler:
http://jsfiddle.net/AndrewBuntsev/r0hw9s6u/