.bop {
  animation: bop 2.8s cubic-bezier(.5,.5,.19,.97) both 2;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 2000px;
}

.bop-forever {
  animation: bop 2.8s cubic-bezier(.5,.5,.19,.97) both infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 2000px;
}

.rotate {
  animation: rotation .5s infinite linear;
}

.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both 2;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@keyframes bop {
  10%, 90% {
    transform: translate3d(0px, -1px, 0);
  }

  20%, 80% {
    transform: translate3d(0px, 2px, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(0px, -2px, 0);
  }

  40%, 60% {
    transform: translate3d(0px, 2px, 0);
  }
}

.heart {
  fill: red;
  position: relative;
  width: 15px;
  margin-left: 10px;
  margin-right: 10px;
  animation: pulse 1s ease infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}