@keyframes buble_call {
    0%{
        transform: scale(1.3) rotate(15deg);
    }
    20%{
        transform: scale(1.3) rotate(-15deg);
    }
    40%{
        transform: scale(1.3) rotate(15deg);
    }
    60%{
        transform: scale(1.3) rotate(-15deg);
    }
    80%{
        transform: scale(1.3) rotate(15deg);
    }
    
    100%{
        transform: scale(1) rotate(0deg);
    }
}
@keyframes toptobottom {
    0%{
        transform: translateY(-100%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes bottomtotop {
    0%{
        transform: translateY(100%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes lefttoright {
    0%{
        transform: translateX(-100%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes righttoleft {
    0%{
        transform: translateX(100%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}@keyframes righttoleftinf {
    0%{
        transform: translateY(20px);
    }
    100%{
        transform: translateY(-20px);
    }
}


/* 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;
}