Lovers

Fontawesome animations that make sense!

by Andy Challis

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<i class='fa fa-heart fa-4x heartbeat'></i>
<i class='fa fa-heartbeat fa-4x heartbeat'></i>

CSS

@-webkit-keyframes beat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes beat {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.heartbeat {
  color: #a83f39;
  -webkit-animation: beat 2s linear infinite;
  animation: beat 2s linear infinite;
}

.heartbeat:hover, .heartbeat:focus {
  -webkit-animation: beat 0.4s linear infinite;
  animation: beat 0.4s linear infinite;
  -moz-animation: beat 0.4s linear infinite;
}

.heartbeat:active {
  -webkit-animation: beat 0.2s linear infinite;
  animation: beat 0.2s linear infinite;
  -moz-animation: beat 0.2s linear infinite;
}