.add-transition {
    visibility: hidden;
}

.transition-done {
    animation-duration: 1.5s;
}

.fade-in {
    animation-name: fadeIn;
}

.fade-in-left {
    animation-name: fadeInLeft;
}

.fade-in-up {
    animation-name: fadeInUp;
}

.fade-in-right {
    animation-name: fadeInRight;
}

.fade-in-down {
    animation-name: fadeInDown;
}

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

    to {
        opacity: 1;
        transform: none
    }
}

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

    to {
        opacity: 1;
        transform: none
    }
}

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

    to {
        opacity: 1;
        transform: none
    }
}

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

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}