@keyframes slideDownAnimation{
    0%{
        transform: translateY(-50px);
        opacity: .2;
        }
    100%{
        transform: translateY(0px);
        opacity: 1;
        }
}

.slideDown{
    animation: slideDownAnimation .5s forwards 0s linear;
}

@keyframes slideUpAnimation{
    0%{
        transform: translateY(50px);
        opacity: .2;
        }
    100%{
        transform: translateY(0px);
        opacity: 1;
        }
}

.slideUp{
    animation: slideUpAnimation .5s forwards 0s linear;
}

@keyframes fadeInAnimation{
    0%{opacity: .2;}
    100%{opacity: 1;}
}

.fadeIn{
    animation: fadeInAnimation .5s forwards 0s linear;
}

@keyframes slideLeftAnimation{
    0%{
        transform: translateX(-100px);
        opacity: .2;
        }
    100%{
        transform: translateX(0px);
        opacity: 1;
        }
}

.slideLeft{
    animation: slideLeftAnimation .7s forwards 0s linear;
}

@keyframes slideRightAnimation{
    0%{
        transform: translateX(100px);
        opacity: .2;
        }
    100%{
        transform: translateX(0px);
        opacity: 1;
        }
}

.slideRight{
    animation: slideRightAnimation .7s forwards 0s linear;
}


@keyframes scaleInAnimation{
    0%{
        opacity: .2;
        transform: scale(0.8);
        }
    100%{
        transform: scale(1);
        opacity: 1;
        }
}

.scaleIn{
    animation: scaleInAnimation .6s forwards 0s linear;
}

@keyframes scaleOutAnimation{
    0%{
        transform: scale(1.3);
        opacity: .2;
        }
    100%{
        transform: scale(1);
        opacity: 1;
        }
}

.scaleOut{
    animation: scaleOutAnimation .6s forwards 0s linear;
}