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

/*[data-anim].animate {
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
[data-anim] {
    opacity: 0;
    transform: translateY(100px);
    animation-name: animate;
}
[data-anim][data-anim-down] {
    transform: translateY(-100px);
    animation-name: animate-down;
}
[data-anim][data-anim-right] {
    transform: translateY(0);
    transform: translateX(-100px);
    animation-name: animate-right;
}
[data-anim][data-anim-left] {
    transform: translateY(0);
    transform: translateX(100px);
    animation-name: animate-left;
}
@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);
    }
}
@keyframes animate-right {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes animate-left {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}*/