@keyframes hottype1 {
    0% {
        /* background-position-y: 0px; */
        transform: translateX(0) translateY(20%) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        /* background-position-y: 0px; */
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    30% {
        /* background-position-y: 0px; */
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        /* background-position-y: -64px; */
        transform: translateX(0) translateY(-20%) rotate(0deg) scale(.5);
        opacity: 0.1;
    }
}

@keyframes hottype2 {
    0% {
        /* background-position-y: 0px; */
        /* transform:perspective(500px) rotateX(-33deg) rotateY(-16deg) rotateZ(-451deg) rotate(45deg) */
        transform: translateX(0) translateY(10%) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        /* background-position-y: 0px; */
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    30% {
        /* background-position-y: 0px; */
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        /* background-position-y: -64px; */
        transform: translateX(-20%) translateY(-20%) rotate(0deg) scale(.4);
        opacity: 0.1;
    }
}

@keyframes hottype3 {
    0% {
        /* background-position-y: 0px; */
        transform: translateX(0) translateY(10%) rotate(0deg) scale(1);
        /* transform: translateX(0) translateY(0) rotate(45deg) scale(1); */
        opacity: 0;
    }
    10% {
        /* background-position-y: 0px; */
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    30% {
        /* background-position-y: 0px; */
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        /* background-position-y: -64px; */
        transform: translateX(22%) translateY(-22%) rotate(0deg) scale(.4);
        opacity: 0.1;
    }
}

@keyframes hottype4 {
    0% {
        /* background-position-y: 0px; */
        transform: translateX(0) translateY(10%) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        /* background-position-y: 0px; */
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    30% {
        /* background-position-y: 0px; */
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        /* background-position-y: -64px; */
        transform: translateX(0) translateY(-20%) rotate(0deg) scale(1);
        opacity: 0;
    }
}

@keyframes hottype5 {
    0% {
        /* background-position-y: 0px; */
        transform: translateX(0) translateY(20%) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        /* background-position-y: 0px; */
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    30% {
        /* background-position-y: 0px; */
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        /* background-position-y: -64px; */
        transform: translateX(0) translateY(-100%) rotate(0deg) scale(1);
        opacity: 0;
    }
}