@keyframes slidingfadein-fade-in-left {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slidingfadein-fade-in-right {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slidingfadein-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slidingfadein-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slidingfadein {
    opacity: 0;
}

.slidingfadein-left-active {
    animation: slidingfadein-fade-in-left 1000ms linear 0ms 1 both;
    transition: color linear 1300ms;
}

.slidingfadein-right-active {
    animation: slidingfadein-fade-in-right 1000ms linear 0ms 1 both;
    transition: color linear 1300ms;
}

.slidingfadein-up-active {
    animation: slidingfadein-fade-in-up 1000ms linear 0ms 1 both;
    transition: color linear 1300ms;
}

.slidingfadein-down-active {
    animation: slidingfadein-fade-in-down 1000ms linear 0ms 1 both;
    transition: color linear 1300ms;
}