@mixin roolith-animation() {
    .animation {
        visibility: visible !important;
        animation-duration: var(--r-animation-duration);
        animation-fill-mode: both;
        transition-timing-function: var(--r-animation-easing);
    }

    .fadeInUp {
        animation-name: fadeInUp;
    }

    @keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translate3d(0, 15%, 0);
        }

        100% {
            opacity: 1;
            transform: none;
        }
    }

    .fadeInDown {
        animation-name: fadeInDown;
    }

    @keyframes fadeInDown {
        0% {
            opacity: 0;
            transform: translate3d(0, -15%, 0);
        }

        100% {
            opacity: 1;
            transform: none;
        }
    }

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

    .fadeIn {
        animation-name: fadeIn;
    }

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

    .fadeOut {
        animation-name: fadeOut;
    }

    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translate3d(-20%, 0, 0);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    .fadeInLeft {
        animation-name: fadeInLeft;
    }

    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translate3d(20%, 0, 0);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    .fadeInRight {
        animation-name: fadeInRight;
    }

    .loader {
        animation: loading 0.6s linear infinite;
    }

    @keyframes loading {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}