@keyframes slideInRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.slideInRight {
    animation: slideInRight 1s ease-out;
}

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

.slideInFromLeft {
    animation: slideInFromLeft 1s ease-out;
}

@keyframes rotateIn {
    0% {
        transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        transform: rotate(0);
        opacity: 1;
    }
}

.rotateIn {
    animation: rotateIn 1s ease-in;
}

@keyframes rotateOut {
    0% {
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform: rotate(90deg);
        opacity: 0;
    }
}

.rotateOut {
    animation: rotateOut 1s ease-out;
}