/* For ball */

@keyframes drop {
    0% {
        opacity: 0;
        transform: translateY(-60px);
    }
    40% {
        opacity: 1;
        transform: translateY(0);
    }
    60% {
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
    }
}


/* Fade animation */
@keyframes fadeInPic {
    50% {
        opacity: 0;
    }
    100% { 
        opacity: 1;
    }
}


@keyframes fadeInEase {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOutEase {
    from {
        opacity: 1;
    }
    
    to {
        opacity: 0;
    }
}



/* Login and sign up animation */


@keyframes fadeOutLeft {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translateX(-60px);
        display: none;
    }
}


@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(60px);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Home animation */
@keyframes fadeInnerOut {
    from {
        opacity: 0;
        transform: scale(0.01);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOuterIn {
    from {
        transform: scale(1);
        opacity: 1;
    }
    
    to {
        transform: scale(0.01);
        opacity: 0;
    }
}