/* bottom to top */
.reveal{
    transform: translateY(100px);
    transition: 0.4s ease;
    opacity: 0;
}
.reveal.active{
    transform: translateY(0);
    opacity: 1;
}
/* left to right */
.revealLeft{
    transform: translateX(-100px);
    transition: 0.4s ease;
    opacity: 0;
}
.revealLeft.active{
    transform: translateX(0);
    opacity: 1;
}
/* right to left */
.revealRight{
    transform: translateX(100%);
    transition: 0.4s ease;
    opacity: 0;
}
.revealRight.active{
    transform: translateX(0);
    opacity: 1;
}
/* scale 0 to scale 1 */
.revealZomeOut{
    transform: scale(0.1);
    transition: 0.4s ease;
    opacity: 0;
}
.revealZomeOut.active{
    transform: scale(1);
    opacity: 1;
}