@keyframes btn_top {
    0% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(-30px);
    }
}




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