.fade-in {
    opacity: 0;
    transition: opacity 1000ms ease-in;
}

.fade-in.appear {
    opacity: 1;
}

.from-left {
    transform: translateX(-50%);
    transition: transform 500ms ease-in;
}

.from-right {
    transform: translateX(50%);
    transition: transform 500ms ease-in;
}

.from-left.appear,
.from-right.appear {
    transform: translateX(0%);
}