body:not(.no-js) [data-animation] {
    opacity: 0;
    transition-timing-function: ease-out;    
}

body:not(.no-js) [data-animation].animate {
    opacity: 1;
    transition: opacity 1250ms, transform 750ms;
}

body:not(.no-js) [data-animation="bottom"] {
    transform: translateY(50px);
}

body:not(.no-js) [data-animation="bottom"].animate {
    transform: translateY(0px);
}

body:not(.no-js) [data-animation="top"] {
    transform: translateY(-50px);
}

body:not(.no-js) [data-animation="top"].animate {
    transform: translateY(0px);
}

body:not(.no-js) [data-animation="left"] {
    transform: translateX(-50px);
}

body:not(.no-js) [data-animation="left"].animate {
    transform: translateX(0px);
}

body:not(.no-js) [data-animation="right"] {
    transform: translateX(50px);
}

body:not(.no-js) [data-animation="right"].animate {
    transform: translateX(0px);
}