.h-1 {
    opacity: 0;
    animation: 10s show-heart infinite;
}

.h-2 {
    opacity: 0;
    animation: 10s 1s show-heart infinite;
}

.h-3 {
    opacity: 0;
    animation: 10s 3s show-heart infinite;
}

.h-4 {
    opacity: 0;
    animation: 10s 6s show-heart infinite;
}

.h-5 {
    opacity: 0;
    animation: 10s 7s show-heart infinite;
}

.h-6 {
    opacity: 0;
    animation: 10s 9s show-heart infinite;
}

@keyframes show-heart {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    45% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.img-1 {
    opacity: 1;
}

.img-2 {
    opacity: 0;
    animation: 12s show-img-2 infinite;
}

.img-3 {
    opacity: 0;
    animation: 12s show-img-3 infinite;
}

@keyframes show-img-2 {
    0% {
        opacity: 0;
    }
    27.33% {
        opacity: 0;
    }
    33.33% {
        opacity: 1;
    }
    60.66% {
        opacity: 1;
    }
    66.66% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes show-img-3 {
    0% {
        opacity: 0;
    }
    60.66% {
        opacity: 0;
    }
    66.66% {
        opacity: 1;
    }
    95.66% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#three {
    opacity: 0;
    transform: scaleY(0.05) translate(0px, 1500px);
    transform-box: fill-box;
    animation: 12s show-three infinite;
}

@keyframes show-three {
    0% {
        opacity: 0;
    }
    42.66% {
        opacity: 0;
        transform: scaleY(0.05) translate(0px, 0px);
    }
    45.66% {
        opacity: 1;
        transform: scaleY(1) translate(0px, 0px);
    }
    65.66% {
        opacity: 1;
        transform: scaleY(1) translate(0px, 0px);
    }
    67% {
        opacity: 0;
        transform: scaleY(0.05) translate(0px, 0px);
    }
    100% {
        opacity: 0;
        transform: scaleY(0) translate(0px, 0px);
    }
}