Interesting CSS Animations

/** =================
 * Heart beating effect
 * HTML: <div class="heartbeat">❤︎</div> // Note, if use span, have to set display: inline-block
 *  ================= */
.heartbeat {
  color: #e00;
  animation: beat .5s infinite alternate;
}
/* 1st keyframes: https://jsfiddle.net/qLfg2mrd/ */
@keyframes heartbeat {
  0% {
    transform: scale(.75);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(.75);
  }
}
/* 2nd keyframes: https://codepen.io/fivera/pen/rzepn */
@keyframes beat{
	to { transform: scale(1.2); }
}