その通りです。CSSのコードを間違えてしまいました。以下のように変更してみてください：

```
.heart {
  position: relative;
  width: 100px;
  height: 90px;
  margin-top: 10px;
}

.heart::before, .heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 52px;
  height: 80px;
  border-radius: 50px 50px 0 0;
  background: orange;
}

.heart::before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

.heart:hover {
  animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(0.48);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.48);
  }
}
```

このコードで動作するはずです！
Tienes toda la razón, cometí un fallo con el código CSS. Puedes probar a cambiarlo por el siguiente:

.heart {
  position: relative;
  width: 100px;
  height: 90px;
  margin-top: 10px;
}

.heart::before, .heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 52px;
  height: 80px;
  border-radius: 50px 50px 0 0;
  background: orange;
}

.heart::before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

.heart:hover {
  animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(0.48);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.48);
  }
}

¡Con este código debería de funcionar!