@keyframes touch{
    0%{
        width:0%;
    }
    100%{
        width:100%;
    }
}
@keyframes leave {
    0%{
        width:100%;
    }
    100%{
        width:0%;
    }
}
@keyframes fadeinl {
    0% {
        display: block;
        transform: translate(-100%);
        opacity: 0;

    }

    75% {
        opacity: 1;
    }

}
@keyframes fadeoutl {
    0% {
        opacity: 1;
    }

    75% {
        transform: translate(-100%);
    }

    100% {
        opacity: 0;
        display: none;
    }
}
@keyframes fadeinr {
    0%{
        transform: translate(100%);
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
}
@keyframes fadeoutr {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: (100%);
    }
}
@keyframes fadeint {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeoutt {
    0% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}
@keyframes fadeinb {
    0%{
        opacity: 0;
        transform: translateY(100%);
    }
    100%{
        opacity: 1;
    }
}
@keyframes fadeoutb {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: translateY(100%);
    }
}