@keyframes appear {
    from{
        opacity: 0;
        transform: translateX(-20rem)
    }
    to{
        opacity: 1;
        transform:  translateX(0rem);
    }
}
@keyframes appearRight {
    from{
        opacity: 0;
        transform: translateX(10rem)
    }
    to{
        opacity: 1;
        transform:  translateX(0rem);
    }
}
@keyframes appearBottom {
    from{
        opacity: 0;
        transform: translateY(20rem) scale(0.5);
    }
    to{
        opacity: 1;
        transform:  translateY(0rem);
        scale: 1;
    }
}

@keyframes appearRightToCenter {
    from{
        opacity: 0;
        transform: translateX(20rem)
    }
    to{
        opacity: 1;
        transform:  translateX(0rem);
    }
}

@keyframes appearLeftToCenter {
    from{
        opacity: 0;
        transform: translateX(-20rem)
    }
    to{
        opacity: 1;
        transform:  translateX(0rem);
    }
}