/*
    Zoom animation
*/

.zoom-leave-active,
.zoom-enter-active {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.zoom-enter-to,
.zoom-leave-from {
    opacity: 1;
    transform: scale(1) translateY(0px);
}

.zoom-enter-from,
.zoom-leave-to {
    opacity: 0;
    transform: scale(0.95) translateY(15px);
}

/*
    Fade animation
*/

.fade-leave-active,
.fade-enter-active {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.fade-enter-to,
.fade-leave-from {
    opacity: 1;
    transform: scale(1);
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    transform: scale(0.95);
}

/*
    FadeDown animation
*/

.fade-down-leave-active,
.fade-down-enter-active {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.fade-down-enter-to,
.fade-down-leave-from {
    opacity: 1;
    transform: translateY(0px) scale(1);
}

.fade-down-enter-from,
.fade-down-leave-to {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
}

/*
    FadeRightToLeft animation
*/

.fade-right-to-left-leave-active,
.fade-right-to-left-enter-active {
    transform-origin: bottom right;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.fade-right-to-left-enter-to,
.fade-right-to-left-leave-from {
    opacity: 1;
    transform: translateX(0px) scale(1);
}

.fade-right-to-left-enter-from,
.fade-right-to-left-leave-to {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
}