/* fadeIn*/

.fadeIn{animation: fadeIn .4s 1 linear forwards;}
.fadeInUp{animation: fadeInUp .4s 1 linear forwards;}
.fadeInDown{animation: fadeInDown .4s 1 linear forwards;}

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

@keyframes fadeInUp{
    from{opacity: 0;transform: translateY(100px);}
    to{opacity: 1;transform: translateY(0);}
}

@keyframes fadeInDown{
    from{opacity: 0;transform: translateY(-100px);}
    to{opacity: 1;transform: translateY(0);}
}

/* fadeOut */

.fadeOut{animation: fadeOut .8s 1 linear forwards;}
.fadeOutUp{animation: fadeOutUp .6s 1 linear forwards;}
.fadeOutDown{animation: fadeOutDown .6s 1 linear forwards;}

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

@keyframes fadeOutUp{
    from{opacity: 1;transform: translateY(0);}
    to{opacity: 0;transform: translateY(-100px);}
}

@keyframes fadeOutDown{
    from{opacity: 1;transform: translateY(0);}
    to{opacity: 0;transform: translateY(100px);}
}

/* zoomIn */
.zoomIn{animation: zoomIn .4s 1 linear forwards;}
.zoomOut{animation: zoomOut .4s 1 linear forwards;}

@keyframes zoomIn{
    0%{opacity: 0;transform: scale(0);}
    25%{opacity: 1;transform: scale(1.3);}
    50%{transform: scale(1);}
    75%{transform: scale(1.3);}
    100%{transform: scale(1);}
}

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