CSS - Text animation and heart pulsing

Video tutorial

Whole code

<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
  </svg>
  <div class="text">
    <span>L</span>
    <span>O</span>
    <span>V</span>
    <span>E</span>
  </div>
</div>

<style>
.container {
  background-color: #000;
  color: rgb(255, 204, 0);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
  width: 90px;
  height: 30px;
  border: 0.5px solid rgb(255, 204, 0);
}
.text {
  margin-left: 10px;
}
.text span {
  font-weight: 500;
  display: inline-block;
  transition: .3s;
}
.container svg {
  fill: rgba(244, 51, 51, 0);
  transition: .3s;
  color: rgb(244, 51, 51);
}
.container:hover svg {
  fill: rgb(244, 51, 51);
  transition: .3s;
  animation: move 1s linear infinite;
}
.container:hover span {
  animation: pulse 2s linear infinite;
}
.container:hover span:nth-child(2) {
  animation-delay: .5s;
}
.container:hover span:nth-child(3) {
  animation-delay: 1s;
}
.container:hover span:nth-child(4) {
  animation-delay: 1.5s;
}
@keyframes pulse {
  30% {
    transform: scale(1.3);
    color: rgb(244, 51, 51);
  }
  50% {
    transform: scale(1);
  }
}
@keyframes move {
  0% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(1px);
  }
  66% {
    transform: translateY(-1px);
  }
}

</style>