@keyframes selfFadeInRight {
    0% {
        opacity: 0;
        transform: translateX(3rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(2rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes selfFadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-3rem);
    }
}

@keyframes selfFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes selfFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(2rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes selfFadeOutBottom {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(2rem);
    }
}

@keyframes changeRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes selfFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeInUpSelf {
    animation-name: selfFadeInUp;
    animation-duration: 0.5s;
}

.fadeOutBottomSelf {
    animation-name: selfFadeOutBottom;
    animation-duration: 0.5s;
}

.characterFadeInRight {
    animation-name: selfFadeInRight;
    animation-duration: 0.5s;
}

.characterFadeOutLeft {
    animation-name: selfFadeOutLeft;
    animation-duration: 0.5s;
}

.characterFadeOut {
    animation-name: selfFadeOut;
    animation-duration: 0.8s;
    animation-timing-function: ease;
}

.characterFadeOut {
    animation-name: selfFadeOut;
    animation-duration: 0.8s;
    animation-timing-function: linear;
}

.characterFadeIn {
    animation-name: selfFadeIn;
    animation-duration: 0.9s;
    animation-timing-function: linear;
}

.music-rotate {
    animation: changeRotate infinite 60s linear;
}

.mobileFadeIn {
    animation-name: selfFadeIn;
    animation-duration: 0.5s;
}

.mobileFadeInDelay {
    animation-name: selfFadeIn;
    animation-duration: 0.5s;
}