:root {
    --animator-easing-type: ease-in-out;
    --animator-duration: 0.75s;
    --animator-delay: 0s;
}

@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translate3d(0, 100px, 0)
    }
    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}
@keyframes fade-left {
    0% {
        opacity: 0;
        transform: translate3d(100px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}
@keyframes fade-right {
    0% {
        opacity: 0;
        transform: translate3d(-100px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

@keyframes zoom-in {
    0% {
        opacity: 0;
        transform: scale(.6);
    }
    100% {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}


[class*="animator"] {
    opacity: 0;
}

.animator-fade-appear {
    animation: fade-up var(--animator-duration) var(--animator-easing-type) var(--animator-delay) forwards;
}
.animator-fade-appear-left {
    animation: fade-left var(--animator-duration) var(--animator-easing-type) var(--animator-delay) forwards;
}

.animator-fade-appear-right {
    animation: fade-right var(--animator-duration) var(--animator-easing-type) var(--animator-delay) forwards;
}

.animator-zoom-in {
    animation: zoom-in var(--animator-duration) var(--animator-easing-type) var(--animator-delay) forwards;
}