@keyframes wipe-up {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    30% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes wipe-down {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

    30% {
        opacity: 0;
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes load-in {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(200px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }

    15% {
        opacity: 0;
        transform: translateX(-200px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes slide-in-right-far {
    0% {
        opacity: 0;
        transform: translate(100vw);
    }

    15% {
        opacity: 0;
        transform: translate(100vw);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.fade-in-animator {
    opacity: 0;
}

.fade-in-animator-effect {
    animation-name: fade-in;
    animation-duration: 0.55s;
    animation-iteration-count: 1;
}

/* another animation */
.bottom-up-animator {
    opacity: 0;
}

.bottom-up-animator-effect {
    animation-name: wipe-up;
    animation-duration: 0.9s;
    animation-iteration-count: 1;
    opacity: 1;
}

/* another animation */
.top-down-animator {
    opacity: 0;
}

.top-down-animator-effect {
    animation-name: wipe-down;
    animation-duration: 0.9s;
    animation-iteration-count: 1;
}

/* another animation */
.right-side-in-animator {
    opacity: 0;
}

.right-side-in-animator-effect {
    animation-name: slide-in-right;
    animation-duration: 0.65s;
    animation-iteration-count: 1;
}

/* another animation */
.left-side-in-animator {
    opacity: 0;
}

.left-side-in-animator-effect {
    animation-name: slide-in-left;
    animation-duration: 0.65s;
    animation-iteration-count: 1;
}

/* another animation */
.right-side-in-long-animator-style {
    opacity: 0;
}

.right-side-in-long-animator-style-effect {
    animation-name: slide-in-right-far;
    animation-duration: 1.05s;
    animation-iteration-count: 1;
}

.right-side-in-long-animator-effect-effect {
    animation-name: slide-in-right-far;
    animation-duration: 1.55s;
    animation-iteration-count: 1;
}

/* another animation */
.load-in-animator {
    opacity: 0;
}

.load-in-animator-effect {
    animation-name: load-in;
    animation-duration: 0.55s;
    animation-iteration-count: 1;
    opacity: 1;
}

/* 

.fade-in-animator {
    opacity: 0;
}

.fade-in-animator-effect {
    animation-name: fade-in;
    animation-duration: 1.1s;
    animation-iteration-count: 1;
}


.bottom-up-animator {
    opacity: 0;
}

.bottom-up-animator-effect {
    animation-name: wipe-up;
    animation-duration: 1.8s;
    animation-iteration-count: 1;
    opacity: 1;
}


.top-down-animator {
    opacity: 0;
}

.top-down-animator-effect {
    animation-name: wipe-down;
    animation-duration: 1.8s;
    animation-iteration-count: 1;
}


.right-side-in-animator {
    opacity: 0;
}

.right-side-in-animator-effect {
    animation-name: slide-in-right;
    animation-duration: 1.1s;
    animation-iteration-count: 1;
}


.left-side-in-animator {
    opacity: 0;
}

.left-side-in-animator-effect {
    animation-name: slide-in-left;
    animation-duration: 1.1s;
    animation-iteration-count: 1;
}


.right-side-in-long-animator-style {
    opacity: 0;
}

.right-side-in-long-animator-style-effect {
    animation-name: slide-in-right-far;
    animation-duration: 2.1s;
    animation-iteration-count: 1;
}

.right-side-in-long-animator-effect-effect {
    animation-name: slide-in-right-far;
    animation-duration: 3.1s;
    animation-iteration-count: 1;
}


.load-in-animator {
    opacity: 0;
}

.load-in-animator-effect {
    animation-name: load-in;
    animation-duration: 1.1s;
    animation-iteration-count: 1;
    opacity: 1;
} 
*/