@keyframes animation-scaleLeftRight {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}
@keyframes animation-scaleRightLeft {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}


/* top to bottom */
@keyframes animation-scale {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    50%{
        opacity: 1;
        transform: scale(1.35);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes animation-topToBottom {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes animation-scalezoom {
    0% {
        opacity: 0;
        transform: scale(5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes animation-leftToright {
    0% {
        opacity: 0;
        transform: scale(2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes animation-rightToleft {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}