@keyframes ZoomOutEntrance {
    0% {
        transform: scale(1.05,1.05);
        opacity: 0;
    }
    100% {
        transform: scale(1,1);
        opacity: 1;
    }
}

@keyframes ZoomInEntrance {
    0% {
        transform: scale(0.95,0.95);
        opacity: 0;
    }
    100% {
        transform: scale(1,1);
        opacity: 1;
    }
}

@keyframes ZoomOutExit {
    0% {
        transform: scale(1,1);
        opacity: 0;
    }
    100% {
        transform: scale(1.05,1.05);
        opacity: 1;
    }
}

@keyframes ZoomInExit {
    0% {
        transform: scale(1,1);
        opacity: 1;
    }
    100% {
        transform: scale(0.97,0.97);
        opacity: 0;
    }
}

@keyframes FadeInEntrance {
    0% {
        opacity: 0;
    }
    70% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

@keyframes FadeOutExit {
    0% {
        opacity: 1;
    }
    70% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}

@keyframes SlideDownFadeInEntrance {
    0% {
        transform: scaleY(0.5);
        opacity: 0;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.zoom-out-entrance {
    animation: ZoomOutEntrance 500ms;
}
.zoom-in-entrance {
    animation: ZoomInEntrance 500ms;
}
.zoom-in-exit {
    animation: ZoomInExit 300ms;
}
.zoom-out-exit {
    animation: ZoomOutExit 500ms;
}
.fade-in-entrance {
    animation: FadeInEntrance 500ms;
}
.fade-out-exit {
    animation: FadeOutExit 500ms;
}

.slide-fade-entrance {
    animation: SlideDownFadeInEntrance;
}

.anim-duration-100 {
    animation-duration: 100ms;
}

.anim-duration-300 {
    animation-duration: 300ms;
}

.anim-duration-500 {
    animation-duration: 500ms;
}

.anim-duration-700 {
    animation-duration: 700ms;
}

.anim-duration-900 {
    animation-duration: 900ms;
}