.left-to-right {
    animation: leftToRight 1s ease-in-out;
    -webkit-animation: leftToRight 1s ease-in-out;
}

@keyframes leftToRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


.right-to-left {
    animation: rightToLeft 1s ease-in-out;
    -webkit-animation: rightToLeft 1s ease-in-out;
}

@keyframes rightToLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}