.animation--from-left {
    transform: translateX(-50%);
    transition: transform .5s;
}
    .animate.animation--from-left {
        transform: translateX(0);
    }

.animation--from-right {
    transform: translateX(100%);
    transition: transform .5s;
}
    .animate.animation--from-right {
        transform: translateX(0);
    }

    .animation--from-0-to-100 {
        width: 0;
        transition: width .5s;
    }
    .animate.animation--from-0-to-100 {
        width: 100%;
    }
    .animation--from-0-to-100-height {
        height: 0;
        opacity: 0;
        transition: height .5s, opacity .5s;
    }
    .animate.animation--from-0-to-100-height {
        opacity: 1;
        height: 100%;
    }

.animation--fade {
    opacity: 0;
    transition: opacity .5s;
}
    .animate.animation--fade {
        opacity: 1;
    }
.animation--from-left-fade {
    transform: translateX(-50px);
    transition: transform .5s, opacity .5s;
    opacity: 0;
}
    .animate.animation--from-left-fade {
        opacity: 1;
        transform: translateX(0);
    }

.animation--from-right-fade {
    transform: translateX(50px);
    transition: transform .5s, opacity .5s;
    opacity: 0;
}
    .animate.animation--from-right-fade {
        opacity: 1;
        transform: translateX(0);
    }

.animation--from-top-fade {
    transform: translateY(-50px);
    transition: transform .5s, opacity .5s;
    opacity: 0;
}
    .animate.animation--from-top-fade {
        opacity: 1;
        transform: translateX(0);
    }

@keyframes anim-from_bottom_fade{
    0%{
        transform: translateY(50px);
        opacity: 0;
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
.animation--from-bottom-fade {
    transform: translateY(50px);
    opacity: 0;
}
    .animate.animation--from-bottom-fade {
        animation: anim-from_bottom_fade .5s forwards;
    }

    .transition--delay-1 {
    transition-delay: .1s;
    }

    .transition--delay-2 {
    transition-delay: .2s;
    }

    .transition--delay-3 {
    transition-delay: .3s;
    }

    .transition--delay-4 {
    transition-delay: .4s;
    }

    .transition--delay-5 {
    transition-delay: .5s;
    }

    .transition--delay-6 {
    transition-delay: .6s;
    }

    .transition--delay-7 {
    transition-delay: .7s;
    }

    .transition--delay-8 {
    transition-delay: .8s;
    }

    .transition--delay-9 {
    transition-delay: .9s;
    }

    .transition--delay-10 {
    transition-delay: 1s;
    }

    .transition--delay-11 {
    transition-delay: 1.1s;
    }

    .transition--delay-12 {
    transition-delay: 1.2s;
    }

    .transition--delay-13 {
    transition-delay: 1.3s;
    }

    .transition--delay-14 {
    transition-delay: 1.4s;
    }

    .transition--delay-15 {
    transition-delay: 1.5s;
    }

    .transition--delay-16 {
    transition-delay: 1.6s;
    }

    .transition--delay-17 {
    transition-delay: 1.7s;
    }

    .transition--delay-18 {
    transition-delay: 1.8s;
    }

    .transition--delay-19 {
    transition-delay: 1.9s;
    }

    .transition--delay-20 {
    transition-delay: 2s;
    }

    .transition--delay-21 {
    transition-delay: 2.1s;
    }

    .transition--delay-22 {
    transition-delay: 2.2s;
    }

    .transition--delay-23 {
    transition-delay: 2.3s;
    }

    .transition--delay-24 {
    transition-delay: 2.4s;
    }

    .animation--delay-1 {
    animation-delay: .1s!important;
    }

    .animation--delay-2 {
    animation-delay: .2s!important;
    }

    .animation--delay-3 {
    animation-delay: .3s!important;
    }

    .animation--delay-4 {
    animation-delay: .4s!important;
    }

    .animation--delay-5 {
    animation-delay: .5s!important;
    }

    .animation--delay-6 {
    animation-delay: .6s!important;
    }

    .animation--delay-7 {
    animation-delay: .7s!important;
    }

    .animation--delay-8 {
    animation-delay: .8s!important;
    }

    .animation--delay-9 {
    animation-delay: .9s!important;
    }

    .animation--delay-10 {
    animation-delay: 1s!important;
    }

    .animation--delay-11 {
    animation-delay: 1.1s;
    }

    .animation--delay-12 {
    animation-delay: 1.2s;
    }

    .animation--delay-13 {
    animation-delay: 1.3s;
    }

    .animation--delay-14 {
    animation-delay: 1.4s;
    }

    .animation--delay-15 {
    animation-delay: 1.5s;
    }

    .animation--delay-16 {
    animation-delay: 1.6s;
    }

    .animation--delay-17 {
    animation-delay: 1.7s;
    }

    .animation--delay-18 {
    animation-delay: 1.8s;
    }

    .animation--delay-19 {
    animation-delay: 1.9s;
    }

    .animation--delay-20 {
    animation-delay: 2s;
    }