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

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

.from-left {
    transform: translateX(-50%);
}

.from-right {
    transform: translateX(50%);
}

.from-left, .from-right {
    opacity: 0;
    transition: opacity 400ms ease-in, transform 400ms ease-in;
}

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