@keyframes slideIn {
    0% {
        transform: translateY(50px);
        /* Start from below */
    }

    100% {
        transform: translateY(0);
        /* End at original position */
    }
}

@keyframes fadeLeft {
    0% {
        transform: translateX(-50px);
        /* Start from left */
    }

    100% {
        transform: translateX(0);
        /* End at original position */
    }
}

@keyframes fadeIn {
    0% {

        transform: translateY(30px);
    }

    100% {

        transform: translateY(0);
    }
}

@keyframes fadeDown {
    0% {
        transform: translateY(-50px);
        /* Start from above */
    }

    100% {
        transform: translateY(0);
        /* End at original position */
    }
}

@keyframes fadeRight {
    0% {
        transform: translateX(50px);
        /* Start from right */
    }

    100% {
        transform: translateX(0);
        /* End at original position */
    }
}

@keyframes fadeTop {
    0% {
        transform: translateY(-50px);
        /* Start from top */
    }

    100% {
        transform: translateY(0);
        /* End at original position */
    }
}

@keyframes fadeBottom {
    0% {
        transform: translateY(50px);
        /* Start from bottom */
    }

    100% {
        transform: translateY(0);
        /* End at original position */
    }
}

@keyframes scaleUp {
    0% {
        transform: scale(1);
        /* Start at normal size */
    }

    100% {
        transform: scale(1.5);
        /* Grow to 1.5 times the size */
    }
}

@keyframes scaleDown {
    0% {
        transform: scale(1.5);
        /* Start at 1.5 times the size */
    }

    100% {
        transform: scale(1);
        /* Shrink back to normal size */
    }
}

@keyframes scaleIn {
    0% {
        transform: scale(1.5);
        /* Start invisible and scaled up */
    }

    100% {
        transform: scale(1);
        /* End fully visible at normal size */
    }
}

@keyframes scaleOut {
    0% {
        transform: scale(1);
        /* Start fully visible at normal size */
    }

    100% {
        transform: scale(1.5);
        /* End invisible and scaled up */
    }
}

@keyframes scaleBounce {

    0%,
    100% {
        transform: scale(1);
        /* Normal size at the start and end */
    }

    50% {
        transform: scale(1.5);
        /* Grow to 1.5 times the size in the middle */
    }
}