[data-anim] {
    opacity: 0;
    transform: translateY(100px);
}
[data-anim].animate {
    animation-name: animate;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
[data-anim][data-anim-down] {
    animation-name: animate-down;
}
@keyframes animate {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes animate-down {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}