.animation_fade.animation_run {
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-name: animation_fade;
}

.animation_fade {
    opacity: 0;
}

@keyframes animation_fade {
    0% {
        opacity: 0;
    }

    70% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes circle {
    0% {
        transform: rotate(0deg) translate(-165px) rotate(0deg);

    }

    100% {
        transform: rotate(360deg) translate(-165px) rotate(-360deg);
    }
}

@keyframes circle-left-rotate {
    0% {
        transform: rotate(0deg) translate(65px) rotate(0deg);

    }

    100% {
        transform: rotate(360deg) translate(65px) rotate(360deg);
    }
}

@keyframes square {
    0% {
        right: 120px;
        top: 110px;
    }

    25% {
        right: 120px;
        top: 50px;
    }

    50% {
        right: 170px;
        top: 50px;
    }

    75% {
        right: 170px;
        top: 110px;
    }

    100% {
        right: 120px;
        top: 110px;
    }
}

@keyframes square-bottom {
    0% {
        right: -385px;
        bottom: 40px;
    }

    25% {
        right: -385px;
        bottom: 100px;
    }

    50% {
        right: -445px;
        bottom: 100px;
    }

    75% {
        right: -445px;
        bottom: 40px;
    }

    100% {
        right: -385px;
        bottom: 40px;
    }
}