@keyframes navSlide{
from{
top:-100px;
}
to{
top:0;
}
}

/* slide right */

.slide-right{
opacity:0;
transform:translateX(-80px);
animation:slideRight 1.2s forwards;
}

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

/* slide left */

.slide-left{
opacity:0;
transform:translateX(80px);
animation:slideLeft 1.2s forwards;
}

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

/* slide up */

.slide-up{
opacity:0;
transform:translateY(100px);
animation:slideUp 1.5s forwards;
animation-delay:.8s;
}

@keyframes slideUp{
to{
opacity:1;
transform:translateY(0);
}
}