heartBeat.css

TLDR

This file contains CSS code for an animation called heartBeat, which scales an element in a pulsating manner.

Classes

.heartBeat

This class applies the heartBeat animation to an element. It sets the animation name to heartBeat, the duration to 1.3 times the value of the --animate-duration CSS variable, and uses the ease-in-out timing function.

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.3);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.3);
  }

  70% {
    transform: scale(1);
  }
}

.heartBeat {
  animation-name: heartBeat;
  animation-duration: calc(var(--animate-duration) * 1.3);
  animation-timing-function: ease-in-out;
}