@keyframes moveInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    80%{
        transform: translate(10px);
    }
    100%{

        opacity: 1;
        transform: translate(0);
    }
}

@keyframes moveInRight{

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

    80%{
        transform: translate(-10px);
    }
    100%{

        opacity: 1;
        transform: translate(0);
    }


}

@keyframes grow-left{

    from{
        transform: scaleX(0)
    }

    to{
        transform: scaleX(1)
    }

}

@keyframes fade-in-right {
    
    from{
        opacity: 20;
        transform: translateX(-100vw);
    }
    to {
        opacity: 1;
        transform: translateX(0);
      }
    
}

@keyframes float-up {
    
    from{
        opacity: 20;
        transform: translateY(10vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
      }
    
}


/* on scroll animations */
@keyframes fade-in {
    from {opacity: 0; transform: scale(.5,.5)}
    to {opacity: 1;}
}