@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes pulsate {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.heart {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: red;
    transform: rotate(45deg);
    animation: float 3s ease-in-out infinite, fadeOut 3s ease-in-out forwards;
}

.heart:before,
.heart:after {
    content: "";
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
}

.heart:before {
    top: -10px;
    left: 0;
}

.heart:after {
    top: 0;
    left: -10px;
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
}

.fade-out {
    animation: fadeOut 0.5s ease-in-out forwards;
}