@keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
}
.fade-in {
    animation-name: fade-in;
}

@keyframes slide-in-left {
    from { transform: translateX(-100%); opacity: 0 }
    to { transform: translateX(0); opacity: 1 }
}
.slide-in-left {
    animation-name: slide-in-left;
}

@keyframes slide-in-right {
    from { transform: translateX(100%); opacity: 0 }
    to { transform: translateX(0); opacity: 1 }
}
.slide-in-right {
    animation-name: slide-in-right;
}

@keyframes slide-in-top {
    from { transform: translateY(-100%); opacity: 0 }
    to { transform: translateY(0); opacity: 1 }
}
.slide-in-top {
    animation-name: slide-in-top;
}

@keyframes slide-in-bottom {
    from { transform: translateY(100%); opacity: 0 }
    to { transform: translateY(0); opacity: 1 }
}
.slide-in-bottom {
    animation-name: slide-in-bottom;
}

.animate {
    animation-fill-mode: both;
}