[data-anime] {
    opacity: 0;
    transition: 2s;
}

[data-anime="downXup"]{

    /* transform: translate3d(0, 100%, 0);*/
    transform: translateY(100%);

}

[data-anime="upXdown"]{

    /* transform: translate3d(0, -100%, 0); */
    transform: translateY(-50%);
}

[data-anime="leftXright"]{

    /* transform: translate3d(-100%, 0, 0); */
    transform: translateX(100%);

}

[data-anime="rightXleft"]{

    /* transform: translate3d(50%, 0, 0); */
    transform: translateX(100%);
}

[data-anime="valt"]{
    transform: translateX(-100%);
    
}

[data-anime].animate {
    opacity: 1;
    /* transform: translate3d(0, 0, 0); */
    transform: translate(0);
}