@keyframes up {
    from {
        opacity:0;
        transform: translateY(16px);
    }

    to {
        opacity:1;
        transform: translateY(0);
    }
}

.animate-up {
    animation-name: up;
    animation-duration: 300ms;
    animation-fill-mode: backwards;
}

@keyframes down {
    from {
        opacity:0;
        transform: translateY(0);
    }

    to {
        opacity:1;
        transform: translateY(16px);
    }
}

.animate-down {
    animation-name: down;
    animation-duration: 300ms;
    animation-fill-mode: forwards;
}