.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
    opacity: 1;
}

.fade-enter-active {
    transition: opacity 0.3s ease-out;
}

.fade-leave-active {
    transition: opacity 0.3s ease-in;
}

.slide-enter-from,
.slide-leave-to {
    transform: translateY(20%);
}

.slide-enter-to,
.slide-leave-from {
    transform: translateY(0);
}

.slide-enter-active {
    transition: transform 0.3s ease-out;
}

.slide-leave-active {
    transition: transform 0.3s ease-in;
}

.slide-down-enter-from,
.slide-down-leave-to {
    transform: translateY(-100%);
}

.slide-down-enter-to,
.slide-down-leave-from {
    transform: translateY(0);
}

.slide-down-enter-active {
    transition: transform 0.3s ease-out;
}

.slide-down-leave-active {
    transition: transform 0.3s ease-in;
}

.slide-top-enter-from,
.slide-top-leave-to {
    transform: translateY(100%);
}

.slide-top-enter-to,
.slide-top-leave-from {
    transform: translateY(0);
}

.slide-top-enter-active {
    transition: transform 0.3s ease-out;
}

.slide-top-leave-active {
    transition: transform 0.3s ease-in;
}

.slide-right-enter-from,
.slide-right-leave-to {
    position: absolute;
    top: 0;
    opacity: 0;
    transform: translate(-100%, 0);
}

.slide-right-enter-to,
.slide-right-leave-from {
    position: initial;
    opacity: 1;
    transform: translate(0%, 0);
}

.slide-right-enter-active {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.slide-right-leave-active {
    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

.slide-left-enter-from,
.slide-left-leave-to {
    position: absolute;
    top: 0;
    opacity: 0;
    transform: translate(100%, 0);
}

.slide-left-enter-to,
.slide-left-leave-from {
    position: initial;
    opacity: 1;
    transform: translate(0%, 0);
}

.slide-left-enter-active {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.slide-left-leave-active {
    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

.slide-scale-top-enter-from,
.slide-scale-top-leave-to {
    transform: scale(0.8);
    transform-origin: top center;
}

.slide-scale-top-enter-to,
.slide-scale-top-leave-from {
    transform: scale(1);
    transform-origin: top center;
}

.slide-scale-top-enter-active {
    transition: transform 0.3s ease-out;
}

.slide-scale-top-leave-active {
    transition: transform 0.2s ease-in;
}

.slide-scale-center-enter-from,
.slide-scale-center-leave-to {
    transform: scale(0.8);
    transform-origin: center;
}

.slide-scale-center-enter-to,
.slide-scale-center-leave-from {
    transform: scale(1);
    transform-origin: center;
}

.slide-scale-center-enter-active {
    transition: transform 0.3s ease-out;
}

.slide-scale-center-leave-active {
    transition: transform 0.2s ease-in;
}

.transition-duration-05s {
    transition-duration: 0.5s !important;
}

.transition-delay-05s {
    transition-delay: 0.5s !important;
}